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!