• Stop CSS Background Flickering in Internet Explorer 6

    Oct 18 2008

    I was once again reminded of an IE6 bug I had forgotten about - background images flashing or flickering when the mouse hovers over them.

    So, I went looking for a solution. Here's what I found:

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

    Works like a charm. Turns out it's due to the browser not caching the background images. This command turns on background image caching.

    Do you think this would be good code to add to the core jQuery library?

  • Comments

    1. Zach Leatherman at 3:50am on October 19, 2008

    Weird, I just hit up against this and another problem related to caching in IE6, and just wrote up my thoughts today.

    The other half of my problem involved adding img tags to the page using JavaScript.

    http://www.zachleat.com/web/2008/10/18/dear-ie6-please-cache-my-images/

    2. Nick Dunn at 9:04am on October 20, 2008

    I'm not sure this would be appropriate in the jQuery core. It's rather browser-specific. However it would make sense for this to go into ie7.js, since the sole purpose of the script is to fix IE6 bugs.

    Thanks for the reminder. I keep meaning to add this into my common functions library that is used in every project.

    3. Björn Rixman at 11:18am on October 27, 2008

    It's a great fix to a really annoying issue. Since it's a tiny snippet of code, I'd personally rather put it in a global .js-file than have it included into the jQuery core.

    My experience though is that the fix isn't working properly on a multipleIE IE6 – only "real" IE6 browsers. Another thing to notice is that the fix doesn't solve flickering background images if you swap an image on mouseover; only changing background-position.

    4. Marco Pracucci at 7:58am on January 20, 2009

    This fix works only with Internet Explorer 6, Service Pack 1 or newer.

    5. Ty at 12:35pm on February 6, 2009

    Hi Guys
    where would you apply the javascript to load the gfx?
    Im using loads of backgrounds in a piece im doing and IE really lets it down...
    Thanks
    Ty

    6. Pawel at 12:47am on June 17, 2009

    U dont need to do that at all.

    Assign the images properly and there will be no issue with IE 6.

    BG images should be assigned to the div around the 'a' tag...

    lets say.. ul li a ... assign the image to li tag ...

    or simple wrap up the a tag and assign the bg image.

    NEXT...

    style wrapper and "a" tag the same ( width, heigh, block) and test it....

    7. Nick Dunn at 1:47am on June 17, 2009

    You say this is doing it "properly", but you've diverged from convention of placing both the background and its hover state on the anchor itself. Your solution does solve the problem, since the background image on the containing LI is ever-present, meaning the 'flash' isn't visible. But it still means you've used a workaround just to fix IE6. I'd prefer to code logically for the other browsers, and use a piece of disposable JavaScript for IE6.

    8. pawel at 3:14am on June 17, 2009

    puting wrapper div is still better solution in my opinion to fix IE6 flickering... what is someone have js turned off... and in the case of using ie6 is common thing... what then? bg images will still  flash... in your solution.....

    I do think is coded logicaly as in many cases u dont even have to add divs.... but just style properly dives around....

    Adding aditional styling is way better then adding js.. (client side script)

    Well, it is my opinion... i just wanted to give u the solution... to do it with no JS.... (for me much better) ....

    What u chose, it's up to u.

    9. Jason at 10:04pm on October 3, 2009

    Thanks, works perfect. Anyone wanting or needing instructions on how to use the code:

    1) Create a .js file lets say 'ie6fix.js' and paste the above code into it and save in the directory where you'll be using the script.

    2) Load the script using IE conditional comments (hidden to other browsers just like html comments)

        <!--[if lte IE 6]>
            <script type="text/javascript" src="ie6fix.js"></script>
        <![endif]-->

    Load the script from your site index page as it only needs to be run once per browser session. If visitors are likely to visit other pages first then you'll have to load it from all other pages to cover for that, or you could use some other scripting, sniffing method.

    10. Seb at 12:42pm on October 28, 2009

    I have just built a website with CSS and divs in  Dreamweaver CS4 which has a Flash banner on each page and java script rollover nav bar.

    My problem is that in Firefox the whole screen flashes white for a second when moving from page to page in Fire Fox  while it seems to work fine in Safari, Opera and Windows IE.

    Any help would be appreciated.

    11. Pawel at 2:13pm on October 28, 2009

    Could you show us the website ? Then it would be easier to identify the problem....

    12. Ryan at 5:36pm on March 16, 2010

    pawel,

    If someone has javascript turned off, they shouldn't be on the internet.

    13. Stig at 9:51am on August 23, 2010

    Ryan, pawel,

    If someone is using IE 6, they shouldn't be on the internet.

    14. chris at 8:51pm on April 25, 2012

    hi all,
    i hope i will find the answer here. i've just finished my webpage. its main frame has black bg color. i ve noticed that i get these silly white flashes while switching my gallery images under ,,projekty''. i believe it all started since i've done self-adjusting vertical alignment of my gallery. it was ok before - i had no white flashes. of course, i have set up my bg color as black, i also tried using black bg gif image but the flashing remains.
    please any suggestions from you.
    my webpage
    248dotcomdotpl
    248.com.pl

    Commenting is now closed. Come find me on Twitter.