IE6/Win, background image on <a>, cache=‘check every visit’: flicker!

This page has the javascript fix, described below, applied. Check the original page, without the js fix.

The problem

Setup:

Result:

The request to the server contains an If-Modified-Since header, which usually results in a 304 response from the server, so the image is not retransmitted and the local cached copy is used. However this extra round trip between client and server generates the flicker (unless the network connection between the client and the server is much responsive.)

What becomes visible when the image disappears because it is re-requested to the server? Sometimes an underlying background, sometimes it seems that the content of an internal buffer is displayed which may contain other parts of the current page.

A detailed study of the conditions which make the flicker noticeable is at http:// www.fivesevensix.com/ studies/ ie6flicker.

This flicker affects most of the rollovers using background images on <a>s. Even if the background images are preloaded the extra requests to the server always occur, and these usually creates flicker. The use of a single image (with different background positions) for the different rollover states, or the repetition of the background on an underlying element cannot definitely stop the problem.

Workarounds

If the server sends an appropriate Expires header for the image, then IE stops any further requests to the server and uses its cached copy of the image. Settings for the Apache server are described at http:// dean.edwards.name/ my/ flicker.html. Settings for the IIS server are described at http:// www.aspnetresources.com/ blog/ cache_control_extensions.aspx.

If server configuration is not possible, the same result can be obtained with a server-side script which serves the image with a Expires header. The script should be used as background image, in place of the image itself.

Update September 2006 Thanks to Dan Popa, a javascript workaround using an undocumented parameter in a Microsoft proprietary function is available, at least for IE6 SP1 (and newer.) Check this same page with the js fix applied.

Examples

In all the following 10 examples the background images represent digits, with white background. They are served on request by server-side scripts. At each request a counter is incremented and one of 10 different images (corresponding to last digit of the counter) is served. Moreover the scripts contain an artificial 1 second delay. All this exaggerates the flicker effect (image disappearing and reappearing) and makes possible to see any request of the image to the server, because the image itself changes.

Playing with the mouse at different speeds on the various examples (also resize the window in between) makes different flicker effects to show up. Only the first and the last example are fully free of this problem.

You can also notice that any change in the browser's “Text Size” setting triggers a reload of the background images, but that's not a big problem.

  1. The background image is on a div wrapping the <a>: no flicker problem, no extra requests to the server.
  2. Like 1, but the background image (small image, with no-repeat, with background-position, with background-color) is on the <a>
  3. Image is big, no no-repeat, no background-position, no background-color
  4. Like 3, but the image is small
  5. Like 3, but with background-color
  6. Like 3, but with background-position
  7. Like 1+2, the image is repeated both on a wrapper div and on the <a>
  8. Like 2, but the background image is on a span element which fills the <a>
  9. Like 3, but the background image is on a span element which fills the <a>
  10. Like 2, but the image is served with a Expires header (set in the future): the image is not re-requested to the server: no flicker.
1
2
3
4
5
6
7
7
9
10
 

Further Notes

If the IE6 cache setting is not ‘check every visit’, no re-request of background images occurs.

Even when no re-request of the image to the server occurs, still another type of flicker may exist, much less evident. In other words it is possible to experience flicker, even if the cache setting is not ‘check every visit’, and if the server has been configured as suggested in the above mentioned pages. This effect is neither frequent, nor very noticeable, except on slow machines. The problem sometimes appears as a brief change of the cursor to the “wait” (hourglass) state when the mouse enters or exits an <a> with background image. I'm not sure what causes this. Probably is a sort of check-in-the-cache/retrieve/redraw the background image.

If a page with the problem is re-displayed in a browser window using the back (or forward) button (after having browsed to other pages), then in the re-visualized page the problem of the repeated requests to the server is no more present. But as soon as the page is refreshed the problem returns.

Advice: When possible, avoid background images on <a>!

Comments?

CSS tests home