Blinking IE 6.0

Dec 7

I noticed this a while back, when attaching a background image style to an anchor tag with a hover event it causes IE 6.0 to flicker when the hover action is triggered.

The reason the flicker occurs is because the browser (IE 6.0) requests the image from the server each and every time you rollover the image. Not only is the flicker annoying it also creates an unnecessary load on the server.

One solution detailed by Dean Edwards is to add the following to your htaccess file in apache.


ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

This forces the server to tell the browser to cache the images, for a certain time period, however it does require apache and the 'expires_module' to be loaded.

Another solution as mentioned at fivesevensix.com is to buffer the image by placing it in the containing element and the anchor.

/* double buffer the image by placing it on BOTH the containing element and the anchor */

#nav dt.share {
width: 164px;
background-image: url(/images/home_share.gif);
}
#nav dt.share a {
background-image: url(/images/home_share.gif);
}

/* using the pixy double image method, so move the image around on :hover */
/* Note: this is one of the causes of flicker, but we don't see it because it's double-buffered */
#nav dt dt.share a:hover {
background-position: 0 23px;
}

Further references:-


Filed under:
Web design
Posted by:
James Griffin
Dated:
December 7, 2004