CSS sprite based rollover blinks in IE6

Question

I'm using the CSS based rollover "trick" that switches the background position of the element's background image on hover.

The CSS

#welcome #step1 
{background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;}
#welcome #step1:hover 
{background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll right top;}

The HTML

<div id="welcome">
<a class="steps" id="step1" href="?page=signup"></a>
...
</div>

Naturally IE6 messes this simple thing up. All my rollovers blink.

Upon mouse over the image vanishes for a moment then moves to the over state. An interesting quirk, if I navigate away from the page then press the BACK button the problem seems to go away!

I'm thinking it has to do with the PNG image files (though they don't have any transparency) Or perhaps something simple as doc type (XHTML transitional)

Thanks for your insight.

EDIT (SOLVED):

Jitendra provided the link to solve the problem. I simply added this to the head:

<!--[if IE 6]>
<style type="text/css" >

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
</style>
<![endif]-->

Answer 1

See these solutions-

http://ajaxian.com/archives/no-more-ie6-background-flicker

http://www.hedgerwow.com/360/bugs/dom-fix-ie6-background-image-flicker.html

Answer 2

The browser is requesting the image from the server for each CSS rule where you specify the url() property. To fix this, simply combine the background portion of your two rules into one rule and set the background-position property for each state of the css sprite.

#step1, #step1:hover {
    background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll;
}
#step1 {
    background-position: left top;
}
#step1:hover {
    background-position: right top;
}

This problem actually happens in many browsers. It's just more noticeable in IE6.

As a side note, if you're using IDs, specifying two ids in your selector is unnecessary. IDs should be unique to the page.

Answer 3

I don't have IE6 around anymore to test with, but have you checked to make sure that the image is fully cacheable by the client? It should have an explicit Expires or Cache-Control: max-age HTTP header.

Answer 4

This article has a discussion of the triggers of this problem and some other solutions: http://web.archive.org/web/20100105213004/http://www.fivesevensix.com/studies/ie6flicker/

Also, the CSS to fix this as provided by Gabriel can be improved to:

#step1 {
    background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#step1:hover {
    background-position: right top;
}

Answer 5

for fun, what happens if your :hover style specifies only

 {background-position: right top;}

Answer 6

Sounds like a typical case of 'IE6 Flicker' which is caused by a setting in IE6. The browser re-requests the image from the server on hover... Stupid right? Have you tried 'Double Buffering' the image? By this I mean place the same background image on both the parent element and the link itself. Example below:

#welcome {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#welcome #step1 {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;
}
#welcome #step1:hover {
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll right top;
}

Let me know how you get on :)