IE6 Background Flicker

Internet Explorer 6 has a bad case of Alzheimer’s.

Working with CSS typically means that you are going to be using a whole lot of background images, at least I do. I love building my sites with CSS rollovers/sliding door/CSS sprite techniques. Typically in the past I have not run into a whole lot of problems with doing so, but after I started working at Crocs, it became obvious. Since almost all the computers here are managed by a central department, all the laptops and desktops come pre-configured a certain way. IE6 is the only browser you get, and even if you wanted to upgrade to to IE7 (which as been out since October 2006) you can’t, you’re not an admin on your computer. In fact you can’t even upgrade your Flash player, version 6 will just have to do, nevermind that was released 6 years ago.

I’m not picking on Crocs, this is standard fare for large scale, non-web centric, corporations. It makes sense to configure all the computers the same: Most people are not power users, they just need Outlook/Office/IE, but when you’re in the business of creating websites, this can be quite a pain.

So it was much to my chagrin that I first ran into this bug on Bite Shoes with the top navigation. The problem is fixed now, and this is exactly what this post is about, fixing the problem.

The Issue

It has been very well documented, but here is the overview from Ryan Carver’s Five Seven Six article

Flickering causes more problems than just annoying the user (not to mention the designer!). The reason the image flickers is that every time you mouse over, the image is re-requested from the server. This means increased bandwidth usage. Also, the slower the user’s connection, the longer that will take and the more intrusive it will be.

The cause of flickering is choosing “Every visit to page” in Tools » Internet Options... » Temporary Internet Files » Settings...

Selecting anything other than “Every visit to page” will fix all flickering. Fortunately, the means that the flicker problem plagues developers far more than your common user.

The latter explains why I had never run into this until I came here and all IE6 installs has that option set. Ryan lists a number of solutions in his article, let’s take a look at each one.

Double Image Buffering (CSS pseudo-fix)

This technique is outlined on Petr Staníček’s Wellstyled. It basically just involved including the background image on the wrapping element as well as the a tag. This way when the :hover is activated on the anchor tag and the image disappears while requesting the image, you will see the image behind it, making the flicker less detectable. Depending on the functionality and look of your navigation (or whatever element you are using CSS rollovers on) this can be done with varying degrees of difficulty. It’s not a bad solution, but let’s see what our other options are.

JavaScript Fix

Ryan links to an article by Dean Edwards (of Packer fame) in which he explains how to fix this my editing your .htaccess or httpd.conf file in Apache. More on that in a second, but on that same page Dean links to a JavaScript solution by mister-pixel.com. The solution is quite simple, and it just involves adding a small JS snippet to your document head.

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

It’s a very simple fix that anyone could implement, but when I was working with Bite, the solution did not work for me. I’m not sure why honestly, but this spurred me on to more drastic measures.

Apache Server Fix

Going back to Dean Edwards’ article, we see a server-side solution to a browser problem.

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 OnExpiresDefault 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.

We don’t run Apache here at Crocs (so I did not get the chance to really test this one out), but fortunately, Dean links to a solution for IIS.

IIS Server Fix

This one requires a bit more know how than any of the other solutions:

Fire up the IIS Manager snap-in from Administrative Tools, pick a folder in your web app, right click, go to Properties, switch to the HTTP Headers tab, and click Add. Add cache-control extensions like this:

Click Ok to dismiss the dialog. Your HTTP Headers tab should have extensions listed.

What’s right for you?

Well, that’s going to be up to your specific situation, but one of the above should work. I went with the the IIS server fix so I know that one works, but it had to be implemented by my buddy Mike who knows how to talk to those servers (and where this magical IIS Manager is). Also that solution requires access to server configuration, something most of us on shared hosting will not have.

My personal vote is for server fixes though, it keeps everything neat and tidy and forces IE6 to comply without adding any additional markup to your sites.

If anyone knows of any additional solutions that I could add here, please leave a comment.

Good luck!

Can’t get enough? You may be interested in these posts as well:

Using PNGs

Hide hard coded image with CSS

Remove scrollbar from Textarea in IE