Image flickering

Já ouviu falar em image flickering?
Até semana passada, eu não. Mas certamente, assim como eu, você já viu acontecer: links com imagem de fundo que, quando você passa o mouse por cima, perdem o background. No lixo do IE6.
Eu não sabia que tinha um nome bonito.
Por exemplo, essa classe CSS aqui daria problema:

.someClassName {
    background:#AABBCC url(someBackGroundImage.gif) repeat-x;
}

Pelo que entendi do assunto, essa é uma questão relacionada a como o browser (não que o IE6 seja um browser, mas vamos lá…) faz cache das imagens.

Existem várias soluções para esse problema – sim, é um problema ao meu ver, e não uma propriedade do browser. De uma googlada e veja que há várias técnicas.
Uma delas seria não usar imagens de background em links. Outra, colocar uma div (ou algum outro elemento) em volta do link e usar background nela.
FAIL para ambos.
Mudar a sua marcação html por causa do IE6 não faz sentido; é um browser antigo, que não segue padrão algum, que vem caindo em desuso.

Existe um fix para isso que funciona bem em qualquer IE6 instalado numa Windows com qualquer Service Pack.
Dentro do head do seu html, coloque o javascript:

<script type="text/javascript">
try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
</script>

Esse script tenta fazer com que o browser use as imagens salvas no cache da máquina.
Funciona belezinha.

Agora, e quem usa um IE6 sem Service Pack? O choro é livre.
E atualize seu browser, por favor!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *