Check out the Latest Articles:
IE6 Background Flicker When changing backgrounds with css

One of the most time consuming things I do at work is trying to support legacy programs. Programs like Outlook 2000 and IE6.

“But I use IE6 at work, it’s not legacy…” “Microsoft still provides updates for it…”

Where I work uses IE6, so I know your pain, but it is legacy. IE6 was released before Windows XP; I remember switching to it when I was running Windows Millennium because 5.5 did not have javascript support. When Windows XP was released it was the first (and last) windows operating system to come with IE6 pre-installed. The actual release date of IE6 was August 27 2001, and October 19th is when Windows XP went retail.

Thanks to Vista being a Terri-bad resource intensive, huge pile of unwanted trash, almost a decade later many companies and people still run Windows XP. After Vista’s release lots of companies and home users decided to downgrade their system from Vista to XP (many will argue this was like an upgrade, since Vista’s minimum requirements were over quadruple of what XP’s recommended specifications; meaning terrible performing computers can run like super computers by going to XP).

Now companies will pay for a second license (many qualified for the Vista Business to XP free downgrade) and eat the cost or write it off. Home users on the other hand generally did not want to shell out an extra 200 dollars for a legit license. At first, XP was not that hard to crack. The popular way to pirated XP is to trick the activation service into thinking you have activated XP, and avoid getting Windows Genuine Advantage (which is required for a lot of windows updates). This means users never run windows updates (which is a huge security risk I must add, among many other cons for having pirated windows; including having to deal with IE6) and are stuck with the default IE6.

Thank goodness web developers and major websites are fighting against IE6. A few months ago both Google and told users they no long support how IE6 will render their web pages.

Anyways, back to my original reason for writing this. Fixing a semi-common problem of background images flickering when you change them via CSS.

It is quite common that web developers will want navigation and certain links to change in order to let user know that what they are hovering over will do something if you click it. I wont get into the details of good or bad ways of doing things; but at work I needed to change the background image of an anchor tag (because IE6 does not support css pseudo hover events on anything but anchor tags). After doing this, there was a strange flicker of the background image of normal-state-image -> no image -> hover-state-image. Nothing earth shattering, but still very distracting.

But as I played with it, even while I was still hovering over the image but moving my cursor around, the background still flicks around. The worst was when I moved away from the anchor completely, and the background image completely disappeared (mousing over it and off of it again brings it back). Wow, thats not acceptable (Personally ditching support for IE6 is perfectly acceptable, but since the company I work for still uses IE6 as the corporate browser, I needed to fix this).

Some would tell me try to find a jQuery/javascript solution, however I would have used a different tag other than an anchor for this effect in the first place… however using a different tag and using jQuery to swap the class would still cause a flicker problem, because IE6 seems to have problems when background-image is changed by changing the css (this happens when switching classes or forcing inline styling) regardless of which ever tag is used.

Besides, here is the fix you have been waiting for me to post:

html {
filter: expression(document.execCommand(“BackgroundImageCache”, false, true));

(Note to self: find word-press code insert plugin; or make one)

So, it is a filter, which means this will cause your css to no longer validate. It also is not needed for every non-Microsoft based browser, and anything newer than IE6. Best to add this to your IE6.css file and have it load conditionally; chances are you already have a IE6.css like file for your website, and it doesn’t validate already.

  1. Someone on Wednesday 26, 2010

    Excellent, thanks!

    You just saved me a lot of time, Thanks a lot!

    • fyfester on Wednesday 26, 2010

      Glad it has helped; if you have any questions on css I’ll try to help and make an article about it :)