Flickering CSS Background Images in IE6

Thursday, April 27, 2006

An email in the Scriptaculous mailing list brought up the topic of flickering CSS Background Images in IE6. I remember researching it when I was writing custom javascript scrollbars. A more redundant task you can not imagine, I know, but I gotta do what the boss wants. Anyway, the scroll widget was a little div with a background image that you could drag up and down. Actually you can see the spiffy things on this site. I noticed that in IE it would constantly reload the background image as you dragged it. Seems IE has a bit of a bug with background images on elements with which you interact, like hovering, clicking and dragging.

Then I found the holy grail of articles to deal with this problem: " Minimize Flickering CSS Background Images in IE6" by Ryan Carver at Fix Six Seven. There are several ways to avoid it, like avoiding certain background properties and avoiding transparent gifs, but my favourite one is this, to avoid flickering:

The area of an element with a background-image must be at least 2500 pixels.

Make the element at least 50x50 and it stops reloading the image.... Hahahah, oh man, there's something seriously wrong with that browser.

Anyway thought I'd post it because I always forget where I find the answers to the obscure problems you run into every now and then.

5 Comments

On the April 27, 2006, jake howlett wrote:

The 50*50 thing doesn't seem to apply to the flickering logo on my codestore site (top left), which is 183*48px or something like that. In this case the image is a background to the h1 which contains an A tag link to the homepage.
Annoying, but fixed in IE7

On the April 27, 2006, Andrew Tetlaw wrote:

Roll on IE7! IE6 is now the Netscape4 of the current browser-scape.

On the September 7, 2006, amit rai wrote:

"The area of an element with a background-image must be at least 2500 pixels."

This does not work so you may as well remove it. Checked in IE 6.0 on xp sp2

On the September 25, 2008, Perra wrote:

This can still be a problem in IE 7 when using the CSS background-image. I changed the background image from 2 x 2 to 50 x 50 and volia, the flickering when scrolling dissaperd!