Drupal Behavior to Fix IE6 CSS Background Image Flickering

Submitted by ted on 11 May 2009 - 2:05am

When the new myLifetime community launched we wanted to focus on performance, and one trick was to minimize HTTP requests by using the CSS sprites technique. For a great run down of this technique and examples of other major sites using this, check out this resource on Smashing Magazine.

Double checking this implementation with YSlow! everything was working great.

Well almost. Then we tried IE6. I hate IE6.

Then I discovered this excellent post detailing IE6 and its BackgroundImageCache usage.

After trying that JS trick, we noticed the page was significantly faster & smoother in IE6. With heavy CSS sprite usage this was a necessary fix. And with future sites in the works with this same technique, seems like a reoccurring fix.

To Drupal-ize & jQuery-ize this fix for resuability, I wrote this simple behavior below that works with Drupal 6. You can see in action on the myLifetime community.

/**
 * Fix flickering background images in IE.
 */
Drupal.behaviors.fixIEFlickr = function() {
  if (jQuery.browser.msie) {
    try { 
      document.execCommand('BackgroundImageCache', false, true); 
    } catch(err) {}
  }
};

May this code save you a few hours/days of head banging!

Hi Ted, I was curious

Submitted by Tostinni (not verified) on 12 May 2009 - 10:28am.

Hi Ted, I was curious regarding the fact that you didn’t use CSS/JS aggregation for your CSS/JS files, is it because you use a CDN (ltcdn.com) ? Thansk for sharing this tip.

@Tostinni aggregation is

Submitted by ted on 12 May 2009 - 11:53am.

@Tostinni aggregation is usually on but sometimes the other engineers turn it off to debug some other caching issues with the CDN. No normal reason to have it off :) But the CDN does help greatly even if it is off.

Thanks Ted, in fact I was

Submitted by tostinni (not verified) on 12 May 2009 - 1:10pm.

Thanks Ted, in fact I was suprised, by the speed of the site, in Opera display is blazzing fast so it wasn’t an issue having the CSS/JS files split. Bests

Hi Ted, This solution

Submitted by Linda (not verified) on 21 May 2009 - 2:08pm.

Hi Ted,

This solution sounds brilliant and just what I’m looking for!

I only have one problem….as a newbee in Drupal, I haven’t got any idea WHERE to put this code….. can you help me out?.... what file needs to be changed? Do I create a new module?

I would love to add a background-image to my site, but not if it flickers in IE!!

Thanks in advance,

Linda

Linda a few background

Submitted by ted on 21 May 2009 - 6:02pm.

Linda a few background images should still work fine in IE6. If you are using a lot of them like in the above linked examples that is where you can run into issues.

To use this technique create a new JavaScript file and use your themes info file to include this script. You could also optionally add this in a module using drupal_add_js but that might be more work than is needed.

ted serbinski