Tuesday, September 26th, 2006

No More IE6 Background Flicker

Category: CSS, IE, Tip

<>p>Have you been bugged by IE background flicker?

Cristi Balan talked about the issue and the solution:

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

Cristi links to a blog posting by Dan Popa, who discovered the IE6 background image flicker fix. And while you’re on Dan’s site, check out a forensic analysis of the IE6 BackgroundImageCache command identifier.

Posted by Dion Almaer at 8:55 am
25 Comments

++++-
4 rating from 74 votes

25 Comments »

Comments feed TrackBack URI

Cool but anything else than vaild – duh!

Comment by .mario — September 26, 2006

I had this problem just yesterday and ended up disabling the rollover for IE. Great to see there is a solution!
Thanks.

Comment by Derek Ekins — September 26, 2006

You could use jQuery (or prototype for that matter) to test for msie, and insert the code when needed.

Comment by Gilles — September 26, 2006

IE Background Flicker Bug behoben – kann es wirklich so einfach sein?

Seit wir angefangen haben unsere Webseiten Standartkonform aufzubauen hat ein Bug (OK es waren viele aber hat war wirklich kacke) richtig genervt, das Flickern der Hintergrundbilder im Internet Explorer.Schuld daran ist die Tatsache, daß der IE es für

Trackback by web output — September 26, 2006

Hm, the name and links in the posting are a bit mixed up.

The fix was not discovered by me. That’s the work of Dan Popa:
http://misterpixel.blogspot.com/

I just did the small CSS bit to allow you to easily add the fix to the page and wrote a small article on it:
http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker

And yes, of course that CSS is invalid, but that should go in your IE only stylesheet anyway, next to all the zoom: 1 declarations and other hacks.

Comment by Cristi Balan — September 26, 2006

I think a cleaner method would be to apply the same via Javascript, as expressions are considered to be slow.

eg.

if (isIE) {
try {
document.execCommand(“BackgroundImageCache”,false,true));
} catch(e) {
// just in case this fails .. ?
}
}

If IE 7 doesn’t have this problem, then the logic should obviously just check for IE

Comment by Scott Schiller — September 26, 2006

It appears a “less-than” terminated my comment. Should be “IE less than 7″. Then I ranted about how this might fix an issue on a large project I’m involved with, where we ditched using drop shadows on photo thumbnails due to an IE cache-related performance issue, which this may fix. (Shouldn’t be “re-requesting” either, but maybe client-side caching-related – the images are already being sent with future “Expires” headers, so requests should not be sent – this seems like another, separate caching-related issue which this tweak fixes.)

Bottom line, it sounds like a potentially great fix! Kudos to Dan Popa, “Mr. Pixel.”

Comment by Scott Schiller — September 26, 2006

Cristi: We fixed the post, thanks!

Comment by Ben Galbraith — September 26, 2006

I’d agree that an expression is probably not the best way to deliver this. Probably a script block inside conditional comments. But what I’d really need to know is does this fix have any side-effects?

Reading the MSDN support article that is apparently the only(??) reference for this command identifier, it seems to be new functionality added post SP1 to address a specific bug. Does that mean its safe to apply elsewhere? everywhere? Presumably there’s a reason IE6 doesnt do this by default…

Comment by Sam Foster — September 26, 2006

I prefer the .htaccess/modexpires server-side method. That method doesn’t require any code on the client.

Comment by Andy Kant — September 26, 2006

An old alternative would be a simple webserver configuration, to send out caching instructions for static assets like images and javascript files. Beside solving the flicker issue, this would also improve performance from page to page basis. See more at http://deezsombor.blogspot.com/2006/05/flickering-css-background-images-ie6.html

Comment by Dee Zsombor — September 26, 2006

This is great, for SP1 users but I wish it worked with the “:hover” pseudo-class for background changes.

Comment by Kevin Davison — September 26, 2006

You absolutely do not want to do this with an expression.

It’s a cute way to write it, sure. But keep in mind that expressions are evaluated over and over again, many times per second, ad infinitum. This is the equivalent of a infinite setTimeout loop with an interval of 100ms. Not exactly what you’re aiming for…

Just use JavaScript.

if (dojo.render.html.ie60) { … }
// …or whatever library you prefer

Comment by Patrick Corcoran — September 26, 2006

For Javascript fix, we can simply add this :

//Fix for IE6-
if(document.uniqueID && !window.XMLHttpRequest ){
document.execCommand(“BackgroundImageCache”,false,true)
}

Comment by Hedger Wang — September 26, 2006

All that sniffing… why not simply use conditional compilation:


/*@cc_on
document.execCommand(”BackgroundImageCache”, false ,true);
@*/

That is by far the safest way to do it.

Comment by Klaus Hartl — September 27, 2006

[...] Via Ajaxian. [...]

Pingback by Klaus Hartl - Stilbüro : Flicker Fixed — September 27, 2006

Why not use conditional comments already supported by all versions of IE?

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

Comment by Jason Kichline — September 27, 2006

Seems to be fixed with todays security patch for some reason.

I had the problem and did the fix but found out later that it was fixed without this hack too.
Can anyone confirm this? Would this be a positive message for IE6 for once ;-)

Comment by Arno — September 27, 2006

The BackgroundImageCache command identifier was introduced by IE6 SP1.It will actually generate a JavaScript error in IE prior to that vesion.
So, someone might want to really sniff for IE6 gte IE6 SP1.
Check my site for details or go directly to the
Microsoft KB article.

The easiest thing to do is to stuff the command into any browser, without mercy, hidding the garbage inside a try{}catch(){}

Comment by Dan POPA — September 27, 2006

No More IE6 Background Flicker

Trackback by My Blog — October 6, 2006

Here’s my mini-IE6 detector. IE7 doesn’t exhibit the flicker problem so why do anything? This will probably fire on IE5, IE5.5, etc. but who should really be using those anyway? ;)


//-- for IE6 but not IE7, Moz, Safari, Opera...
if (typeof document.body.style.maxHeight == "undefined") {
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) { /* unless it's not IE6... */ }
} // if

Comment by Jeffrey — November 21, 2006

There’s one big misconception about browser sniffing: Looking at the user agent string might be bad, but not simply because of itself. It’s bad because it will never tell you for sure if the browser providing this user agent string will or will not support a certain feature. On the other hand, checking for a specific browser feature (or it’s absence) will never tell you for sure which browser is making a request.

So, always check for the exact browser property you intend to use. Do not check for some property, that is completely unrelated to the problem (like document.body.style.maxHeight in this case) just to try and identify a certain browser version. This is at least as bad as relying on user agent strings.

Comment by Fabian Robok — November 25, 2006

your a star!

I love it….no thinking required ;-)

Comment by Luke — April 3, 2007

This solution is great but it breaks mouse event support in Opera 9. Events are stacked but never executed. Then, when you close the page or reload it, they ALL fire up at once! So it’s a good idea to try to apply this fix only on MSIE.

Comment by H. Dufort — May 23, 2007

It seems, the problem is in IE7 too?

Comment by Friseur Muc — August 21, 2007

Leave a comment

You must be logged in to post a comment.