Unwanted Blink in IE6

I’m more or less accustomed to the browser incompatibility by now. Its one of the reasons I urge colleagues working as backend developers not to waste time in front-end. Too much to worry about. Time just flies when you are working on that IE5.5 specific bug which doesn’t occur anywhere else :(

Anyhoo, yet another issue came up when I was using the CSS a:hover property to change the background image (say img1.gif) of a button. I generally tend to go for CSS Sprites to reduce the number of image loads (each of them requires a different HTTP request all the way to the server). This makes it quite a big of an advantage for a site dominated by images.

Well, so one expects the image to change in millisecs, if not microsecs, on mouse hover, simply because its already present on the client machine. But NO. IE6 will request the server again for the image, irrespective of whether the file called was a different one (img2.gif) or the same one (img1.gif). This kind-of renders useless the benefits of CSS Sprites. In fact, it creates a situation far worse, because each time IE wants the specific image, it downloads the bulk of tiny images present in a single gif file.

A pretty quick client side hack is use of the javascript in the HEAD tag :

try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}

This makes sense since its a client side issue, but fixes the issue only in IE6 SP1 or higher. If folks want to have a server-side fix for this problem, the easiest one I found is modifying the server properties to cache images. This seems to be a clean fix, and also one that avoids multiple image downloads for the same image repeated across pages (Banners, menu, background). An example for Apache (modifying the .htaccess file) is pasted below

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

You can read more about this here and here.

After modification of .htaccess, I did notice quite a bit of performance improvement in page load time, even though the page was considerably light. No benchmarks or figures available, though :(

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.