Comment résoudre / pirater un bogue PNG semi-transparent atténuant dans IE8?

Hey, je ne sais pas si vous cherchez toujours une réponse. Il y a quelques jours, j’ai eu le même problème en animant une div avec une image PNG à l’intérieur. J’ai essayé plusieurs solutions et la seule qui a bien fonctionné est celle que j’ai moi-même codée.

Le problème semble être le manque de prise en charge de l’opacité et de la prise en charge PNG dans IE, de sorte qu’il casse l’affichage de la PNG après avoir appliqué un effet d’opacité (je pense que les frameworks d’animation reposent sur le filtre de propulsion “AlphaImageLoader” de MSIE). La chose curieuse (pour moi qui ne comprend toujours pas très bien) est que ce problème peut être résolu en utilisant le même filtre pour charger l’image avant l’animation.

J’ai écrit un simple javascript qui applique le filtre à chaque image avec l’extension .PNG. Mes animations fonctionnent bien sur IE avec cela.

Je copie le code ci-dessous. Je suis indépendant du framework (c’est du JavaScript pur), mais vous devez l’insérer dans l’événement DOM ready de votre framework (ou utiliser domready.js, comme je l’ai fait).

var i; for (i in document.images) { if (document.images[i].src) { var imgSrc = document.images[i].src; if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') { document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')"; } } } 

Faites-moi savoir s’il a bien fonctionné pour vous et si l’animation s’est bien déroulée. Sincères amitiés!

HTML

en CSS

 .iefix { /* IE hack */ background:none\9; /* Targets IE only */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(); } 

facile, rapide et sympa 🙂

La cause principale du problème semble être le faible support de Micrsoft IE pour la transparence alpha de PNG (quelle que soit la version de IE). IE6 est de loin le pire contrevenant, rendant les pixels alpha-transparents sous forme de couleur bleu pâle. IE7 et IE8 gèrent la transparence alpha au format PNG, mais ne peuvent pas modifier l’opacité d’un pixel alpha transparent du fichier PNG – elles sont rendues en noir au lieu de transparentes.

Mes propres solutions pour cela dépendent de la situation. Voici quelques approches:

1. Il suffit d’utiliser un GIF. Les GIF n’apparaissent pas aussi lisses (en raison d’une profondeur de couleur limitée), mais les pixels sont totalement transparents.
2. Utilisez le correctif IE PNG disponible ici: http://git.twinhelix.com/cgit/iepngfix/ – ouvrez index.html et lisez les commentaires.
3. Animez le mouvement, mais n’animez pas l’opacité des images PNG.
4. Effectuez conditionnellement tout ou partie de ce qui précède à l’aide de tests JavaScript, de commentaires conditionnels ou de l’extension “behavior” de MSIE uniquement à CSS. Voici comment cela pourrait fonctionner:

Commentaires conditionnels:

Dans le css:

 /* ie6only.css */ img { behavior: url("js/iepngfix.htc"); } 

Via la détection JavaScript:

Le comportement iepngfix.htc fonctionne en remplaçant le fichier PNG par une image vide (blank.gif), puis en utilisant les routines DXImageTransform de Microsoft pour charger le fichier PNG en tant que filtre sur l’image vide. Il existe d’autres correctifs PNG qui fonctionnent en encapsulant des éléments dans des divs ou des span, mais ceux-ci briseront souvent votre mise en page, aussi je les évite.

J’espère que cela t’aides.

J’ai réussi à résoudre ce problème pour IE 6/7/8.

Ressemble approximativement à ceci:

 
 
 
 ... /* I had to explicitly specify the width/height by pixel */ .wrapper { width:100px; height:100px; } .image { width:100%; height:100%; background:transparent url('https://stackoverflow.com/questions/1204457/how-to-solve-hack-fading-semi-transparent-png-bug-in-ie8/image.png') no-repeat; /* IE hack */ background:none\9; /* Targets IE only */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://soffr.miximages.com/jquery/image.png", sizingMethod="crop"); } ... $(".wrapper").fadeOut('slow'); 

Notez que l’atsortingbut “filter” cible implicitement IE uniquement.

J’ai utilisé cette fonction pour précharger des images dans le carrousel de la galerie. C’est basé sur la réponse d’Alejandro García Iglesias ci-dessus. Il s’est débarrassé du “halo noir” dans IE 6 & 8.

 function preloadImages(id) { var c = new Array(); $(id+' img').each( function(j) { c[j] = new Image(); c[j].src = this.src; if ( $.browser.msie ) { this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')"; } }); } 

Appelle comme ça:

 preloadImages('#Stage'); 

Je viens de trouver le moyen de résoudre le problème par hasard lorsque j’essaie de corriger le bogue IE8 dans l’image suivante.

La manière la plus simple consiste à définir le fond de l’image actuelle, comme le code ci-dessous. Ou vous pouvez voir le code source complet et la démonstration sur mon JsFiddle

 #img2 { background:#fff; } 

Toutefois, si vous avez une image complexe comme mon bug, vous devriez essayer d’append un calque presque invisible sous votre image et de définir la couleur d’arrière-plan sur une couleur de votre choix.

Pourquoi n’essayez-vous pas avec PNG8? Le format PNG8 est largement reconnu comme étant totalement transparent au format de fichier GIF. Cependant exporté avec Fireworks, il peut être semi-transparent comme PNG24 . L’avantage est que IE6 affiche le PNG8 avec des pixels semi-transparents comme un GIF – ou avec une transparence totale, mais IE7 et 8 l’affiche correctement en tant que PNG24 et si vous le fondez avec jQuery ou toute autre bibliothèque js, il n’affiche pas le fond avec gray, car il n’utilise pas la célèbre propriété -filter.

J’utilise un correctif PNG modifié pour IE6 qui fonctionne parfaitement:

 (function ($) { if (!$) return; $.fn.extend({ fixPNG: function(sizingMethod, forceBG) { if (!($.browser.msie)) return this; var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions) this.each(function() { var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"), imgname = (isImg) ? this.src : this.currentStyle.backgroundImage, src = (isImg) ? imgname : imgname.subssortingng(5,imgname.length-2); this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')"; if (isImg) this.src = emptyimg; else this.style.backgroundImage = "url(" + emptyimg + ")"; }); return this; } }); })(jQuery); 

n’oubliez pas de télécharger x.gif. (un 1×1 gif transparent)

L’avantage est que IE6 affiche le PNG8 avec des pixels semi-transparents comme un GIF – ou avec une transparence totale, mais IE7 et 8 l’affiche correctement en tant que PNG24 et si vous le fondez avec jQuery ou toute autre bibliothèque js, il n’affiche pas le fond avec gray, car il n’utilise pas la célèbre propriété -filter.

Dans IE, il n’y a qu’un moyen de transformer l’opacité. filtre: alpha (opacité :). Sinon, comment jQuery devrait-il procéder?

Rien n’a vraiment fonctionné pour moi jusqu’à présent si j’ai lu en combinant les parameters d’opacité via CSS et les PNG transparents. Cette solution a fini par fonctionner pour moi sur une page d’opacité animée sur IE8. Les autres solutions listées sur cette page n’ont pas fonctionné.

 #img { background:transparent; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://stackoverflow.com/questions/1204457/how-to-solve-hack-fading-semi-transparent-png-bug-in-ie8/image.png')"; /* IE8 */ zoom:1; width:600px; height:400px; } 
 

Notez que le filtre a d’abord un filtre Alpha, puis AlphaImageLoader.

Ceci peut être similaire à ce que Stu a fait ici: http://www.cssplay.co.uk/menus/flyout_horizontal.html

J’ai le même problème avec IE8 et IE7. Quelqu’un a-t-il testé si les solutions Cmc faisaient l’affaire?

Mon URL est http://www.onlinebrand.dk (le menu principal s’affiche, comme Google :), mais IE ne s’en soucie pas.)

EDIT: Je l’ai juste testé moi-même, et même si je règle la largeur et la hauteur de, ainsi que le répète img. Ça ne marche pas

Je viens de trouver un autre travail, où Fadein est un wrapper au lieu de la div avec l’image .png bg. Et cela a en quelque sorte fonctionné, je suis maintenant en train d’obtenir une sorte de transparence dans IE, mais aussi, un peu de rembourrage / marge .. Totalement étrange ..

Bill Gates, Quoi de neuf avec ça? Pourquoi ne pouvons-nous pas nous entendre?

1. Définissez une couleur de fond unie pour votre image:

   .container img {background-color: white; }

2. Définissez la propriété css background-image de votre image sur son atsortingbut src :

   $ (‘img.png-trans’). each (function () {$ (this) .css (‘background-image’, $ (this) .attr (‘src’));});

Avantage: vous n’avez pas besoin de changer votre marge

Inconvénient: parfois, appliquer une couleur de fond solide n’est pas une solution acceptable. C’est normalement pour moi.

Utilisez Unit PNG Fix pour png-24 semi-transparent.