Question

I am facing an issue with IE6 : every time I mouse over an image the image will reload and flicker.

This is due to the fact that IE has an option “check new version of stored pages all the time” which is basically “reload everything all the time”.

I found some fixes on google :

Adding

<meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)" />
<meta http-equiv="Page-Exit" content="revealtrans(duration=0.0)" />

via webmasterworld

But this doesn’t work on my end so far.

There are also other fixes, like http://fivesevensix.com/studies/ie6flicker/ but it doesn’t really apply to me. The image flickering is a sprite but it will change on certain JS events (so I can’t really use “Duplicate the image” hacks), it is also fairly small so the hack “Pixel area of element” doesn’t work.

Finally there are hacks involving server side caching, but I feel like it’s overkill and there should be a simpler way to do it. Also I always end up working on websites deployed on different kind of servers and having to fix it on the server each and every time would just be painful.

Do you know a solution to this problem? The tag solution sounded so perfect and simple, how come that it’s not working on my end? I’d love to be able to avoid re-writing a lot of CSS/JS in order to fix this, but I’d take any client side fixes.

Thanks !

Answer 1

I place this snippet in a global.js file and include that on all of my pages:

try {
    document.execCommand("BackgroundImageCache", false, true);
catch(e) {}

More information available here.