Skip to content

Drupal Behavior to Fix IE6 CSS Background Image Flickering

1 min read

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!


Related Posts

MothersClick Acquired by Lifetime Networks [] and the rest of the ParentsClick Network []have been acquired by Lifetime Entertainment [] . I’ve been working on this site and with Dietrich (CEO & founder) for over 2

news — 5 min read

Leo talks about the new site

At the end of last week’s TWiT episode [], Leo and company talk about the new site []. A clip of that can be listened to below. Also last week on the Lullabot podcast []

code — 1 min read

My first 15 min of fame!

A few weeks back, Leo Laporte [] approached Lullabot [] about developing the new TWiT website []. Well we gladly accepted, I mean, this is Leo! So I was put in charge of developing the new site, and

code — 1 min read