Opacité JavaScript Anti-alias bug dans Internet Explorer

Question

J'ai rencontré un bug ennuyeux avec Internet Explorer sur une animation javascript que j'ai faite. J'ai une image en niveaux de gris d'un horizon de la ville qui passe son opacité à 0, révélant un horizon en couleur.

Il semble très bien dans tous les autres navigateurs, mais IE révèle des artefacts. Un ami m'a dit que c'était à cause d'un bug bizarre avec l'animation de l'opacité avec javascript dans IE. Quelque chose à voir avec l'anti-aliasing et un fond noir supposé? Je ne sais pas vraiment.

Answer 1

Correction la plus simple - changez les images en gifs. Comme l'image de votre ville n'a aucun dégradé, l'avantage du support de couche alpha au format png n'est pas vraiment ce dont vous avez besoin. Cela devrait fonctionner jusqu'à IE6.

Answer 2

Le filtre alpha (utilisé par jQuery comme solution de repli sur IE où CSS opacity n'est pas supporté) ne peut pas coexister avec une image qui a un canal alpha, comme la variable transparente sur le PNG. Il force les pixels noirs partiellement transparents sur les bords de vos formes à être totalement opaques, provoquant les artefacts.

Vous pouvez obtenir un meilleur résultat en mettant le filtre alpha sur un <div> que contient l'image semi-transparente. (Si vous avez besoin du support d'IE6, vous aurez aussi besoin d'un correctif PNG sur l'image elle-même.) Cela n'est pas tout à fait correct car l'opacité de chaque pixel est prise comme l'opacité de l'image et l'opacité du filtre. deux se sont multipliés. Mais cela semble toujours correct, et n'introduira pas le problème trop opaque que vous avez ici.