Eliminating CSS Image Flicker with IE6

One challange that web designers and developers often wrestle with is an annoying "image flicker" issue that sometimes shows up when using CSS image references.  For example, when using a CSS rule like so:

     .someClassName
     {
            background:#AABBCC url(someBackGroundImage.gif) repeat-x;
     }

This can cause some browsers (including IE 6) to have an annoying flicker when rendering the image (especially when used with hover styles or for background images).  In particular, this often shows up when building hierarchical and show/hide menus, and can degrade the UI experience for the site.  There are two ways to fix the issue for clients:

1) Adjust your web-server's cache content settings for the static images being referenced from the CSS file.  This unfortunately requires admin access on the machine with IIS 6 (although not with IIS7, which supports a delegated administration model that allows you to configure these rules in a web.config file within the app).

2) Use ASP.NET to define a handler that dynamically renders images with the appropriate cache content settings set.  This does not require any special configuration on your web-server, and can be done by simply copying a .ashx handler file into your app.

Russ Helfand (who did the work on the ASP.NET CSS Adapter Toolkit) has a great blog post that details how to-do option #2.  You can read all about his solution here.

This is a great tip/trick you can use for the Menu and TreeView CSS Adapters, as well as for any static element CSS rules you are using within your page.

Hope this helps,

Scott

 

Published Monday, May 29, 2006 1:46 PM by ScottGu
Filed under: , ,

Comments

# Thanks

Monday, May 29, 2006 5:54 PM by proka
Thank you so very much, I had a lot of headaches with the image flickering

# re: Eliminating CSS Image Flicker with IE6

Tuesday, May 30, 2006 2:53 AM by Rumen Stankov (telerik)
Both suggestions are dirty hacks and not good enough. What happens if you are a component vendor and rely on CSS for skinning controls?

You ask all of your clients to implement custom handlers? Or to tweak web-servers they usually have no access to (shared hosting?).

This is an IE6 only issue. Not present in 5, 5.5 & 7. Not present in any other browser as well. This has been the single most annoying IE6 bug of all time. Should have been fixed long ago.

# re: Eliminating CSS Image Flicker with IE6

Tuesday, May 30, 2006 6:52 AM by cowgaR
Thanks for the tip Scott.

Jon, I think you would need to generate additional span tag to your each of your html element if you are using CSS adapters (thus you would need to change the source code). In some cases you would end up with many many spans which is imo not very convenient (e.g. standard html rendered for menu using CSS adapters is easy to style with standard techniques).

but for one-two-three static elements in a page it is a nicer solution, but I doubt it will work for dynamic ones.

# re: Eliminating CSS Image Flicker with IE6

Wednesday, May 31, 2006 8:04 AM by Shane Perran
Good tip, another technique adopted by most of us is using a single image split up into all states and then shifting it using background-position: during :hover

For example if you had a 100px button that needed a hover state:

a.button:link {
background-image:image.gif;
}
a.button:hover {
background-image:image.gif;
background-position:-100px;
}

# re: Eliminating CSS Image Flicker with IE6

Wednesday, May 31, 2006 6:51 PM by billybob
Put in an empty javascript tag in the head. I kid ye not.

# re: Eliminating CSS Image Flicker with IE6

Wednesday, June 7, 2006 11:35 AM by leon
So I just left a comment about none of the cache related "fixes" working on XP and SP2, kept googling and saw others having the same problems.

Some would say, it flickers on my work machine but not at home.

Others saying that it flickers coming from onew web server but not another.

And then one that said. "It stopped flickering as soon as I disabled my Google toolbar."

Well, that was the one that worked for me.

Anyone have a clue why????????

# re: Eliminating CSS Image Flicker with IE6

Thursday, June 15, 2006 4:55 AM by Russ Painter
Another very easy solution which is all-browser compatable is to simply specify the background-position in the style.

In the basic menu example find this in the stylesheet

.PrettyMenu ul.AspNet-Menu li
{
   background:#4682B4 url(bg_nav.gif) repeat-x;
}

Add this line to the style

   background-position:left top;


No more flickering!

# re: Eliminating CSS Image Flicker with IE6

Monday, July 10, 2006 10:46 AM by James

This:

.PrettyMenu ul.AspNet-Menu li

{

  background:#4682B4 url(bg_nav.gif) repeat-x;

}

Add this line to the style

  background-position:left top;

does not work for me!

# re: Eliminating CSS Image Flicker with IE6

Monday, July 10, 2006 3:28 PM by Tyler

I have a great way to fix this.  I found this trick by simply trial and error...  Try this..

Add this to the header of your page:

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/spacer.png', sizingMethod=scale)">

Then find or make yourself a transparent png, of any size, 1x1 is fine.

The reason this alternative works better than the earlier mentioned Alpha(opacity=100) is because that method breaks your alphaimageloader for transparent pngs onload, so then the pngs flash.  

My method forces the alphaimageloader to load on page entrance first, which requires that the whole page be cached, so all other filters, except for transitions, are processed as well, leaving you with a flicker free page, transparent pngs and all!

Excellent! ;-)

# re: Eliminating CSS Image Flicker with IE6

Monday, August 14, 2006 9:44 AM by opeadeoye
the Russ Helfand solution seems unreachable. Like his url is down or something... Anything you can help with like an alternate url or a brief how-to on the solution?

# re: Eliminating CSS Image Flicker with IE6

Monday, August 14, 2006 12:19 PM by ScottGu

Hi Opeadeoye,

I just tried Russ' site above a few moments ago, and it seems to be working fine now.

Hope this helps,

Scott

# re: Eliminating CSS Image Flicker with IE6

Wednesday, October 4, 2006 5:50 PM by kinchu
Wow...this actually worked!!!! --------------------------------------------- Wednesday, May 31, 2006 6:51 PM by billybob Put in an empty javascript tag in the head. I kid ye not. ---------------------------------------------

# re: Eliminating CSS Image Flicker with IE6

Friday, December 1, 2006 6:08 AM by stm

I have static background images (from css background) on my pages. Navigating between the pages the page flickers... only in IE. Firefox renders it nicely.

I think this is a rendering bug in IE6 and even in IE7 RTM(!!!), what I have tried:

- of course my css is valid, has no browser specific hacks in it (no box-model hack and similars at all), all page is xhtml valid, again without any browser specific hacks, pages looks identical in ie and firefox!

- the images properly cached, but that not helps

- the css hacks mentioned above not works

- the html markup hacks (surrounding span/div double background etc.) not works

- empty javascript(?!) in the head not works

- google toolbar disabling not helps

However the IE specific page transition hacks works:

For example <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(duration=0)" />, eliminates the flicker in IE6/IE7 (yes with zero duration :) )

...but this hack has a drawback: if the user disable "page transition" in the advanced settings, the hack not works (:

It seems that the css background flickering will be forever a bug in IE.

# re: Eliminating CSS Image Flicker with IE6

Thursday, January 4, 2007 5:28 PM by Laurent

Very Good!

It helped me a lot with my actual project!

This was one of the last defect to fix.

I knew that I've already read the solution somewhere... and found it here of course!

# re: Eliminating CSS Image Flicker with IE6

Saturday, January 6, 2007 1:15 AM by Paul

i have image in a css flyout nav (using ul and li tags) i tried the empty javascript tag... didn't work for me.. but i found if i just put the nested the li tags in span tags it stopped the flickering!

# re: Eliminating CSS Image Flicker with IE6

Tuesday, January 23, 2007 2:20 PM by George Beier

I tried the empty java script tag and the meta tags above...didn't work. What did work is putting my link buttons in cells in a row of a table, and setting the entire background row to the background image.  A total hack, but it worked.  Flicker gone.