Supprimer le clignotement des images sous IE 6

Internet Explorer 6 est un véritable casse-tête pour beaucoup d'aficionados du CSS. En plus de ces nombreux problèmes d'interprétation du code, il a la mauvaise habitude de provoquer un clignotement (flickering) des images de fond (background-image) lors du passage de la souris (mouse over).
Ayant moi-même eu de nombreuses prises de têtes quant à ce problème, j'ai donc décidé de partager avec vous les différentes solutions pouvant vous aider à vous débarasser de ce satané clignotement.

Le problème

Qu'est-ce qui est considéré comme un clignotement (flickering) et donc un bug d'affichage sur IE6 ? C'est lorsque l'image disparait et apparait lors du passage de la souris.

Le clignotement pose plus de problèmes que le simple dérangement visuel auprès du visiteur et du webdesigner. La raison pour laquelle l'image clignote à chaque mouvement de la souris est qu'elle est perpétuellement rechargée à partir du serveur. Ce qui implique bien entendu un usage accru de la bande passante. Sans compter que plus la connexion de l'utilisateur sera lente, plus le problème sera flagrant et dérangeant !

Bien qu'il ne s'agisse parfois qu'un mauvais réglage dans IE, forçant le cache à se recharger à chaque visite de la page, parfois le problème ne vient pas de là. Vous pouvez cependant voir si votre cache Internet a bien un réglage autre que "A chaque visite de la page" en allant dans les Outils » Options Internet » Général » Fichier Internet temporaires » Paramètres.

Cause 1 : les paramètres des propriétés CSS background

Une image de fond (background) clignotera si une des propriétés suivantes est définie sur un élément (directement ou par héritage) :

background-color: toutes les valeurs sauf "transparent".
Si la valeur est égale à "#000000" l'image pourra clignoter
A contrario si elle est égale à "transparent" (valeur par défaut sans héritage) elle cessera de clignoter.
background-repeat: toutes les valeurs sauf "repeat".
Si la valeur est égale à "no-repeat" l'image pourra clignoter
A contrario si elle est égale à "repeat" (valeur par défaut sans héritage) elle cessera de clignoter.
background-position: toutes les valeurs
Quelque soit la valeur paramétré l'image pourr clignoter

Cause 2 : l'aire d'un élément

L'aire d'un élément avec un paramètre CSS background-image doit être égal ou supérieur à 2500 pixels. Ainsi si votre élément (div par exemple) a une aire plus petite que 2500 pixels, il y a des chances pour qu'il clignote !

Pour calculer l'aire, rien de plus simple, c'est comme lorsque l'on était à l'école : largeur * hauteur.

Cette solution est loin de fonctionner pour tous, mais certains rares chanceux ont obtenus des résultats. Peut-être ferez-vous partie de ceux-là.

Cause 3 : la transparence des gif

La plupart du temps, si une image en format GIF a des zones transparentes, l'image clignotera. Il peut donc être plus judicieux de remplacer les zones transparentes par une couleur (en espérant que votre fond soit de uni).

Technique 1 : le double tampon

Cette technique consiste à créer un "double tampon" pour l'image de fond : un fond pour l'élément et un fond pour le lien (ou l'ancre).

/* utilisation d'une image de remplacement pour tous les elements nav*/  
#nav dt a {
    display: block;
    padding-top: 23px; height: 0px !important;
    height /**/: 23px; overflow: hidden;
}


/* double tampon de l'image en la placant dans le conteneur et dans le lien */
#nav dt.share {
    width: 164px;
    background-image: url(/images/home_share.gif);
}  
#nav dt.share a {
    background-image: url(/images/home_share.gif);  
}
/* Utilisation de la pixy double image method qui retourne l'image au passage de la souris */
/* Note: normalement celà cause le clignotement, mais il est invisible grace au double tampon */
#nav dt dt.share a:hover {
    background-position: 0 23px;  
}

Technique 2 : les délais d'expiration .htaccess et httpd.conf

Bien que ce problème provienne uniquement du client (navigateur), il est possible de corriger le problème en modifiant la configuration du serveur.

Voici comment corriger le problème sur un serveur Apache en éditant le fichier en créant un .htaccess si vous n'avez pas accès à la configuration du serveur :

BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A3600
ExpiresByType image/jpeg A3600
ExpiresByType image/png A3600

Si vous souhaitez modifier le fichier httpd.conf de votre serveur Apache, ajoutez les lignes ci-dessus. Attention, il faut que le module mod_expires soit activé pour que celà fonctionne.

Si vous voulez savoir comment faire sur un serveur avec une plateforme Windows IIS, rendez vous sur cette page.