Image flickering on CSS mouseover in IE is something that you come across from time to time and I came across it last night while working on a project. The problem was I had a “on the tip of my tongue” moment and couldn’t remember what I needed to do to resolve it. As with most IE bugs there are multiple solutions to the same problem but I couldn’t remember the simplest method and the one which doesn’t involve JS or other equally nasty fixes. A quick break to get a drink and the solution popped back into my head. This post is to remind me in the future and to hopefully help you now:
Problem:
In IE ( it was doing it in 6,7 and 8 ) when I hovered over the image (in this case it was a PNG image) the image would either flicker or disappear completely for half a second before coming back. The image rollover was a background image due to requiring other content inside the div.
Solution:
I needed to add the background image to both the parent element AND the child element (in this case the DIV and A tags).
This will work in any situation whether it be a list item, a paragraph or in this case a div. An example is:
#divname {background-image: url(img/yourimage.png);height: 100px; width: 100px;}
#divname a {background-image: url(img/yourimage.png);height: 100px; width: 100px;}
#divname a:hover {background-image: url(img/yourhoverimage.png);height: 100px; width: 100px;}
You could also cut down the problem code by simply doing:
#divname, #divname a {background-image: url(img/yourimage.png); height: 100px; width: 100x;}
I have stripped out all the excess (but needed) code just to show you the relevant code to this specific problem.
By adding it to both elements when IE wants to flicker the fact the parent element also has the same image in the same place prevents the flicker because the same image sits behind the child element. IE’s cache is still (incorrectly) refreshing but you can’t see it anymore thanks to the same image sitting behind it.
It isn’t an ideal solution but it is better than many out there. At least it uses the same image so the browser doesn’t have much more to load.
