No more IE6 background flicker

written by Cristi Balan on 2006-09-25

It’s dead! Ya hear? Passed on! This bug is no more! It has ceased to be! It’s expired and gone to meet its maker!

Quick intro

If you’ve been working with CSS even for just a little while, you surely bumped into some silly Internet Explorer bugs. One of the most annoying ones, at least for me, is the background flicker that happens when you hover a link that has an image as its backgound (here’s a nice demo of this bug).

A number of solutions to make the bug less visible already exist. Some involve moving the background to an element that contains the A while some are more funky and require you to mess with your server settings.

Finally! A real fix

Dan Popa, a nice fellow I worked with at InterAKT Online, has found a real fix for this long lasting problem. The fix is very simple, you just need to add a snippet of JavaScript in your page and it’ll go away until you explicitly turn it back on. Without further ado, here’s the code:

                document.execCommand("BackgroundImageCache",false,true);
                

If you’re on Internet Explorer 6, you can try it right now (the improvement is even more visible if you use the “every visit to the page” option):

  1. Hover the logo on top of the page to see the bug in action.
  2. Apply the fix to the page.
  3. Hover the logo again and see the flicker gone!
  4. If you liked that, remove the fix, go to step 1 and do it all over again.

But don’t believe me, get all the details right from the horse’s mouth. Go and read internet explorer 6 flicker fix and even more forensics on Dan Popa’s blog.

Suprisingly, this fix has been available for a long while now (2 years?) but it seems no one bothered to let us know about it until now. At the time of this writing, there were no mentions of this fix when searching for BackgroundImageCache on google (and yes, MSDN doesn’t count).

Sigh.

Update:
I just realised that a nicer way to deploy this would be using css dynamic expressions, like this:

                html {
                  filter: expression(document.execCommand("BackgroundImageCache", false, true));
                }
                

Of course, you could put anything else instead of filter but that is only picked up by Internet Explorer so it’ll have no side effects. Bonus points if you put it in your IE only stylesheet so that your main one still validates.

Update2:
Scott Schiller pointed out that my CSS solution might slow down the page because of the constant reevaluation of the dynamic properties by IE. So if you’re concerned about performance, you should add the following JavaScript snippet to your page instead of the CSS one above. You can add it anywhere (HEAD, BODY or on onload), it’ll still work.

                try {
                  document.execCommand('BackgroundImageCache', false, true);
                } catch(e) {}
                

Comments

Will be imported into disqus real soon.

Options:

Size

Colors