Page MenuHomePhabricator

Logo can flicker in IE
Closed, ResolvedPublic

Description

Author: tom

Description:
Sometimes when you move your mouse over the main page logo, IE sends a HTTP request for it and flickers
the image whilst doing so.

Primarily this occurs when the logo URL redirects to the actual image (as currently happens on some
Wikimedia projects), but I've seen it happen previously under other circumstances, so it's best to make
sure this can never happen.

Simply applying the logo image to any element than <a> fixes it, so...

Change /templates/xhtml_slim.pt, line 59 to:

<div class="portlet" id="p-logo">
  <a href="${nav_urls/mainpage/href}" i18n:attributes="title string:mainpage"><span style="background-

image: url(${logopath});"></span></a>

</div>

And then update /stylesheets/monobook/main.css, line 601 (replace #p-logo a, #p-logo a:hover):

#p-logo a {

text-decoration: none;

}
#p-logo a span {

display: block;
height: 155px;
width: 12.2em;
background-repeat: no-repeat;
background-position: 35% 50% !important;

}


Version: unspecified
Severity: normal
OS: Windows XP
Platform: PC

Details

Reference
bz634

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 6:55 PM
bzimport set Reference to bz634.
bzimport added a subscriber: Unknown Object (MLST).

tom wrote:

Old patch for logo flicker

attachment logo-flicker.patch ignored as obsolete

tom wrote:

Patch for logo flicker v2

After much mucking around, I decided to make this a script-only fix (much the
easiest way). This patch for IEFixes.js fixes quite a few problems with the
logo in IE5.5+, and only affects IE5.5+.

attachment flicker2.patch ignored as obsolete

tom wrote:

Patch for logo flicker v2.1

Makes sure the document is never transformed more than once.

Attached:

jeluf wrote:

Applied in skins/common/IEFixes.js, rev 1.3

beesley wrote:

This seems to be fixed in the Wikipedias, but I've had a report on my talk page
that it is not fixed for the Wikiquotes:

:In the projects wikiquote (in all the languages) happens the following one:
when passing mouse in top of logo, logo is blinking. This does not happen in the
other projects (wikipedia, wikitionary). What to make so that soon of wikiquote
it is not blinking when passing mouse?
http://pt.wikiquote.org/wiki/Usu%C3%A1rio:Chico

thestephen wrote:

It is my opinion that the logo shouldn't be a background image at all,
especially considering that the page itself already has a background. Far
better to make it a linked image:
<pre>
<div class="portlet" id="p-logo">
<a href="${nav_urls/mainpage/href}" i18n:attributes="title string:mainpage"><img
alt="Logo" border="0" src="${logopath}"></a>
</div>
</pre>

Not only should this fix the problem, it's much better html code.

tom wrote:

This should now be fixed everywhere.