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

 

16 Comments

  • Thank you so very much, I had a lot of headaches with the image flickering

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

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

  • 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; }

  • Put in an empty javascript tag in the head. I kid ye not.

  • 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????????

  • 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!

  • 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!

  • 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! ;-)

  • 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?

  • Hi Opeadeoye,

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

    Hope this helps,

    Scott

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

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

  • 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!

  • 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!

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

Comments have been disabled for this content.