Coding with Jesse

Stop CSS Background Flickering in Internet Explorer 6

October 18th, 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?


Interested in web development? Subscribe to my newsletter!

Comments

1 . Zach Leatherman at 2008-10-19T07:50:14.000Z

Zach Leatherman

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 2008-10-20T13:04:38.000Z

Nick Dunn

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 2008-10-27T15:18:36.000Z

Björn Rixman

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 2009-01-20T12:58:50.000Z

Marco Pracucci

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

5 . Ty at 2009-02-06T17:35:08.000Z

Ty

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 2009-06-17T04:47:38.000Z

Pawel

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 2009-06-17T05:47:49.000Z

Nick Dunn

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 2009-06-17T07:14:26.000Z

pawel

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 2009-10-04T02:04:14.000Z

Jason

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 2009-10-28T16:42:38.000Z

Seb

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 2009-10-28T18:13:23.000Z

Pawel

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

12 . Ryan at 2010-03-16T21:36:07.000Z

Ryan

pawel,

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

13 . Stig at 2010-08-23T13:51:03.000Z

Stig

Ryan, pawel,

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

14 . chris at 2012-04-26T00:51:11.000Z

chris

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