Junecloud

We make apps for iPhone, iPad, Mac, and Web

Internet Explorer and Flickering Background Images

I ran into this issue recently (it had never shown up on my PC at home) and found it rather frustrating. I have little new to contribute, but I’ve seen a lot of conflicting reports on why it happens and how to fix it, so hopefully I can help clarify the issue for some people. The article Caching in IE by Dean Edwards explains the problem well, and the circumstances under which it happens. Minimizing Flickering CSS Background Images in IE6 by Ryan Carver has some more information.

It basically comes down to this: if you assign a background image to a link using CSS, give it certain properties, and set Internet Explorer 6 to reload “every visit to the page”, the images will reload every time you move the mouse over them, causing them to flicker. This happens even if nothing is supposed to happen when you move the mouse over the image! The good news is that “every visit to the page” is not the default setting. Supposedly it can happen (less often) on other settings, though as I said I have never seen it at home (with the “Automatic” setting). For one of my clients it happens on every computer at his office, and quite a few other people use the setting I’ve found, so I felt it was well worth addressing.

A common suggested fix is to double-up the images… For example, if you attach the rollover image to the surrounding element, and simply hide the link’s background image on hover, it will reportedly fix the problem. I don’t like this solution myself, because in many cases it adds excess tags as well as styles. The beauty of using CSS for rollovers is in its simplicity, so it seems like a step backwards. And according to some, the images may still flicker, though I can’t verify whether that’s true.

Thankfully the Caching in IE article has a much better solution. I’m using a slight variation on the suggestion there. I have simply added these lines to an .htaccess file on my Apache server:

ExpiresActive On ExpiresByType image/gif A18000 ExpiresByType image/jpeg A18000 ExpiresByType image/png A18000

If you prefer you can add this to your httpd.conf file. These lines tell the browser to cache GIF, JPEG, and PNG images for 5 hours, which Internet Explorer will respect. It requires Apache’s mod_expires module to be enabled. You can do this by un-commenting these two lines in httpd.conf:

LoadModule expires_module libexec/httpd/mod_expires.so AddModule mod_expires.c

The article also suggests adding some other lines to .htaccess or httpd.conf, but I found they were not necessary, and didn’t seem to affect the issue at all.

It’s worth noting that if you have images that update frequently (a web cam perhaps) this fix could have an adverse effect. You may want to try a shorter time, or use another .htaccess file with different settings in the directory with the frequently reloaded image(s).

If you’re using IIS rather than Apache, Dean Edwards suggests this article on changing the cache settings on a IIS server.

View more

Code

About us

We’re a small software company in the Metro Detroit area of Michigan. We create software for the iPhone, iPad, Mac, Apple Watch, and the web. Learn more about us here. If you have any comments or questions please contact us.