Drupal Behavior to Fix IE6 CSS Background Image Flickering

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!

posted 11 May 2009

5 comments

Tostinni wrote 43 weeks 1 day ago

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.

ted wrote 43 weeks 1 day ago

@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.

tostinni wrote 43 weeks 1 day ago

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

Linda wrote 41 weeks 6 days ago

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

ted wrote 41 weeks 6 days ago

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.

Popular content

Recent comments

Drupal Behavior to Fix IE6 CSS Background Image Flickering

5 comments

Add your comment