dean.edwards.name/my/flicker.html

Whilst developing a work-around to background-attachment:fixed for IE7, I came across the horrible image flicker problem.

Oh. And this is a browser problem not a server problem. Unfortunately the only way to fix it is by configuring your server.

To clarify:

• only affects IE6.0 (not IE5.0/5.5)
• only affects CSS background-images which are influenced by some dynamic effect on the page (these are numerous and are not just hovers)
• is especially persistent when IE’s cache settings are “Every visit to the page” (a common developer’s setting)
• the force-no-vary server configuration does not fix the flicker for the above setting.

As well as these lines:

#this stops screen flicker in IE
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

I added the following lines to my Apache httpd.conf file*:

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

*If you do not have access to the Apache configuration file then the code above will also work if included in your .htaccess file.

Then I tuned on the Apache module mod_expires:

LoadModule expires_module modules/mod_expires.so

And that fixed it good. :-)

The configuration above forces image files to persist in the browser’s cache for 30 days (2592000 seconds). These are probably not ideal settings so someone might want to improve this. I’m no server expert so I copied the expiration settings of the W3C’s site.

This article explains how to implement caching on an IIS platform.