Flickering pre-loaded rollovers in IE

How often does this happen and why?

[thesheep]

I've come across a few mentions on the web that, even when you use a single image with multiple button states, and shift the background position when the element is :hovered, you still get flickering problems in IE - sometimes. One post I read said it was something to do with the way the server is configured, specifically to do with 'Vary' headers. Whatever they are. Then there is an update on Pixy's site about putting 2 elements on top of each other and just making the background transparent on the top one to get the rollover.

Right now I have a client who gets this flickering in IE from my CSS rollovers. They want it recoded using only Javascript. I'm wondering if there's another way. Any advice? I'm assuming that lots of professional sites are now out there that use CSS rollovers so presumably they'd need to get over this problem?

[SuzyUK]

not sure what you mean about and going to transparent for the second image but using the one image twice is a good method to help the flicker not be so noticeable.

the Flicker itself is caused by an IE browser setting: if you choose "Every visit to page" in
Tools » Internet Options... » Temporary Internet Files » Settings...

Changing that setting to "automatically" will fix all flickers, but that's a user setting and not something you can control unless your client wants to do that. I don't think "Every Visit to Page" is the Shipping default for IE, I thought it was meant to be set to "Automatically" but it does seem a lot of non-devs suffer this flicker so what do I know!.

Using a second image, or double buffering is a slight change to Pixy's method, (whose doesn't seem to work all the time). It which will not fix the flicker but it should make it virtually unnoticeable, instead there will just seem like a very slight delay on hover but no flicker..

Use your existing background image but use it twice: both on the link and on the element containing the link.
eg.
<li><a>

the one on the container will not move and will show the "non hovered" state all the time, then when the link is hovered on and has it's little flicker moment while changing to the hovered state the <li> background will temporarily show through looking like the image hasn't changed..

it seems to be the best solution unless you want to change all your clients browser setting ;)

Anyway HTH
Suzy

[thesheep]

Thanks a lot Suzy, that clears up a few things. I had a feeling it was something to do with their browser cache settings because it worked fine for them from a local machine, but got the delay from the remote server.

I'll also try out the method you mention using the container element.