dean.edwards.name/my/flicker.html

Caching in IE

This page is basically a duplication of a comment I made on mezzoblue.

Introduction

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.

That pesky image flicker!!

To clarify:

Update. There is now a JavaScript solution to this problem.

Apache

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.

Microsoft IIS

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

It is a good idea to clear your browser’s cache before testing.