Le web avance et cet article date de janvier 2011, son contenu peut ne plus être pertinent ou d'actualité.

jQuery, png & ie…

Internet Explorer a toujours eu des incompatibilités avec les png (autres que 8 bits qui ne sont assez propres). Ces problèmes ont été corrigés avec Internet Explorer 7, mais seulement partiellement et ce n’est pas la version 8 qui l’a rendu parfaitement compatible avec les images en png.

En effet, tant que ceux-ci sont en statiques, il n’y a aucun problème. Cependant, si on utilise une animation jQuery (entre autre) jouant sur l’opacité d’une image png, via une action fadeTo(), fadeIn()/fadeOut() ou encore une animation animate(), les zones partiellement transparentes du png seront remplacées par un horrible masque noir et ce même une fois l’animation terminée.

Le problème est plus récurrent encore, si cette image png est placée elle même au dessus d’un bloc n’ayant une opacité entière (de 1 ou 0).

Après quelques heures de recherche, voici la meilleure solution que j’ai pu mettre en place, le masque noir apparaîtra toujours brièvement lors de l’animation mais disparaîtra immédiatement :

background:url(images/background.png) no-repeat transparent;
zoom:1;
filter:alpha(opacity=1);
opacity:1;

Et dans un css spécifique à Internet Explorer :

background:none9;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="images/background.png", sizingMethod="crop");

Aussi bizarre que cela puisse paraître, les hacks css pour IE6 résolvent le problème pour celui-ci, je n’ai pas encore testé Internet Explorer 9, mais j’espère qu’il sera la début de la fin des hacks css et autres pertes de temps.

Publié le par Edouard dans css