Accessibility

CSS Advisor

Background image flickers on hover

by CSSAdvisorAdmin on February 23, 2007
Edited by: CSSIntlAdmin on April 11, 2012
Avg Rating 4.3 (20)   |   Log in to rate post.

Tagged with Explorer 6.0 , Explorer 5.0 , Explorer 5.5 , Explorer for Mac , hover , Background

Problem

When hovering over links that have a background image applied, the image flickers in Internet Explorer.

Solution

A Javascript-based solution is available, and a workaround involving a second background image applied to the list item element containing the anchor tag.

Detailed description

When hovering over links that have background images applied, they often 'flicker' in Internet Explorer.  Many solutions have been proposed, but only two seem to be adopted widely.


As reported by Dan Popa (in this article), a very direct solution is to add some relatively unobtrusive Javascript to tweak the background image cache as such:

<script type="text/javascript">
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>
This method appears to be a reasonably solid way to kill the problem, but requires Javascript be enabled in the client browser, of course.

A CSS-based method of combatting this bug which is reportedly still subject to sporadic failures is to apply the same background image to the <li> element that contains the affected link, which will essentially trick the eye into not seeing the flicker when a mouse hovers over the element.




Text ID: BACKGROUND_IMAGE_FLICKERS_ON_HOVER



Comments (9)

To add a comment, please Log in.




Flickering background IE9

Hi, sorry for this newbie question, but I don't seem to get any of the fixes to the problem. I am designing a webpage with the same .jpg backround for all pages and when navigating the page filckers from page to page.
www.cuantacosa.com.ar/building/    
for the navigation code I use an ul and a sprite sheet to show different states.

All css  code is on an external css file and all pages are based on a template.
Can somebody help!!
Thanks!

Round-trip

Heh, stumbled across this old chestnut again!

It should be noted that in IE6, where this flicker bug is found as noted by ALsp, a round-trip to the server occurs when using the (mostly) standard CSS sprite technique - regardless of it being literally the same image being moved around, as mentioned by jsnilsson.

The best solution to this is to use jthome06's solution, though in cases where markup restrictions disallow that method, best to resort to achtungbaby's technique - which requires JavaScript.

Worst case scenario, IE6 with no JavaScript, a user will see a flicker, but that will be the leastof their problems, haha!

Simple Solution

There is a simple solution to this. Put a background image ("on" image) in the list item, and a background image ("off" image) in the anchor tag (setting the display to "block").  On the "hover" pseudo class for the anchor tag, set the background-image to "none", allowing the "on" state to show.   Works great on IE6 (with no flicker effects) as well as all modern browsers.  

Use sprite images

You can also, if fx. in a menu use a 'sprite' image. That is an image with both on and off state placed one over the other. Then you use this css:
a
{ display:block; width:226px ; height:51px; background:url(images/fp_quicklinks_1.png) no-repeat top left; }
a:hover
{ background-position:0 -51px; }

Where -51px is the amount of pixels down that the rollover image is

You can also use CSS

html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

Seems to be *the* solution.

... far better than telling users to change their settings ;-)

Noting the default IE cache setting and that this issue is fixed in IE7

The default cache setting for IE6, which is the only browser version affected by this bug, is "Check for newer versions of stored pages: Automatically". The flicker bug mostly affects web developers who tend to purposely change the default cache setting for testing dynamic pages. Also note that the cache bug has been fixed in IE7.

IE settings

This is usually caused by your Internet Options > "Temporary Internet Files"
settings in IE. If you have "Check for newer version of stored pages:" set as
"Every visit to the page" background flickering will happen. Set it to the next
one down "Every time you start Internet Explorer" and the flicker should stop.

flicking

The IE6/Microsoft chicane should end soon. Firefox at about 40% i some European countries, continue! As mentioned there's downside of JS which is it can be disabled. But people that know why and how to do it don't usually use IE, or do they? :) Anyway, thanks for the tip.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)