How to solve / crack translucent PNG error in IE8?

Question

As you know, IE6 has an error that cannot display a translucent PNG file without using a custom style, such as a filter. In IE7, this problem has been fixed. But he still has an error in the PNG file. It is not possible to display a translucent PNG file correctly. You can clearly see this when using the show / hide function in jQuery with a translucent PNG file. The background of the image is displayed in opaque black.

You have an idea to solve this issue using jQuery.

Update

See my testing

alt text http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDI0bugbio

As you can see, IE8 always incorrectly displays a PNG-24 image. Moreover, IE8 still correctly displays a PNG-8 image when I disappear (jQuery.fadeOut function) only. But it doesn’t display the PNG-8 image correctly when I fade out and resize (jQuery.hide function).

PS. You can download the source code for my testing from here .

Thank,

Answer 1

I just found a way to solve the problem by accident when I try to fix an IE8 error in the following image.

The easiest way: you simply define the background of the current image as the code below. Or you can see the full source code and demo on my JsFiddle

#img2 { background:#fff; } 

However, if you have a complex image, for example, my mistake, you should try to add an almost invisible layer under your image and set the background color to whatever color you like.

Answer 2

Hey, I don't know if you keep looking for an answer. A couple of days ago I had the same problem as animating a div with a PNG image inside. I have tried many solutions, and the only one that worked perfectly is the one that I encoded myself.

The problem is that IE does not support opacity support and proper PNG support, therefore, after applying the opacity effect, it interrupts PNG display (I believe that animated frames rely on MSIE's proprietary AlphaImageLoader filter for opacity effect for IE). A curious thing (for me this still does not understand very well) is that this problem can be solved using the same filter to load the image before animation.

I wrote a simple javascript that applies a filter to each image with a .PNG extension. My animations work fine with IE.

I will copy the code below. I am structure independent (this is pure JavaScript), but you have to put it in your finished DOM event (or use domready.js, like me).

 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 + "')"; } } } 

Please let me know if it works well for you, and if the animation is smooth. Regards!

Answer 3

HTML

  <img src="image.png" class="iefix" width="16" height="16" /> 

in CSS

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

easy, fast and nice :)

Answer 4

The main reason for the problem, apparently, is that Micrsoft IE does not support PNG alpha transparency well (in any version of IE). IE6 is the worst intruder, rendering alpha-transparent pixels as pale blue. IE7 and IE8 handle PNG alpha transparency, but they cannot handle the opacity change of an alpha transparent pixel in PNG - they are displayed as black, not transparent.

My own corrections for this depend on the situation. Here are a few approaches:

• Just use a GIF. GIFs will not look smooth (due to the limited color depth), but the pixels are completely transparent.
• Use the PNG IE fix available here: http://git.twinhelix.com/cgit/iepngfix/ - open index.html and read the comments.
• Motion animation, but not PNG opacity animation.
• Conditionally execute any or all of the above, using either JavaScript tests, conditional comments, or the MSIE-only CSS extension for behavior. Here's how it might work:

Conditional comments:

 <!-- in index.html, in the <head>: --> <!--[if IE 6]> <link rel="stylesheet" src="css/ie6only.css" /> <![endif]--> 

In css:

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

Through JavaScript detection:

 <script defer type="text/javascript"> if(navigator.appName == "Microsoft Internet Explorer") { /* Do IE-specific stuff here */ } else { /* Non-IE-compatible stuff here */ } </script> 

The behavior iepngfix.htc works by replacing PNG with a blank image (blank.gif), and then using Microsoft DXImageTransform procedures to load PNG as a filter on a blank image. There are other PNG fixes that work by wrapping things in a div or span, but they often break your layout, so I avoid them.

Hope this helps.

Answer 5

I managed to fix this problem for IE 6/7/8.

Roughly looks like this:

 <div class="wrapper"> <div class="image"></div> </div> ... /* I had to explicitly specify the width/height by pixel */ .wrapper { width:100px; height:100px; } .image { width:100%; height:100%; background:transparent url('image.png') no-repeat; /* IE hack */ background:none\9; /* Targets IE only */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop"); } ... $(".wrapper").fadeOut('slow'); 

Note that the filter attribute implicitly targets only IE.

Answer 6

I used this function to preload images into the carousel gallery. It is based on Alejandro Garcia Iglesias above. He got rid of the "black halo" in IE 6 and 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 +"')"; } }); } 

Call:

 preloadImages('#Stage'); 

Answer 7

Why don't you try PNG8. PNG8 is widely known as completely transparent as a GIF file format. However, exported using Fireworks, it can be translucent, like PNG24 . The advantage is that IE6 displays PNG8 with translucent pixels, since it is a GIF, or with full transparency, but IE7 and 8 display it correctly as PNG24, and if you link it with jQuery or some other js library, it doesn't will display the background with gray because it does not use the well-known -filter property.

Answer 8

I am using a modified PNG fix for IE6, it works fine:

 (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.substring(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); 

Remember to download x.gif. (transparent 1x1 gif)

Answer 9

The advantage is that IE6 displays PNG8 with translucent pixels, since it is a GIF, or with full transparency, but IE7 and 8 display it correctly as PNG24, and if you link it with jQuery or any other js library, it will not display The background is grayed out because it does not use the well-known -filter property.

In IE, there is only one way to make opacity. filter: alpha (opacity :). How else to do jQuery?

Answer 10

Nothing actually worked for me while I was reading, combining both opacity parameters through CSS and transparent PNG. This solution turned out for me on an animated opacity page on IE8. Other solutions listed on this page did not work.

 #img { background:transparent; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; /* IE8 */ zoom:1; width:600px; height:400px; } <div id='img'></div> 

Note that the filter first has an alpha filter, and then an AlphaImageLoader.

Answer 11

I have the same annoying problem with IE8 and IE7 .. has anyone tested if Cmc solutions do the trick?

My url is http://www.onlinebrand.dk (The main menu disappears like Google :) But IE doesn't care.)

EDIT: just checked it myself, and even if I set the width and height, well, repeating img. This does not work.

I just found another job where Fadein is a wrapper instead of a div with a .png bg image. And it kind of worked, Im now getting some transparency in IE, but also some extras / fields. Overall wierd ..

Bill Gates, What's up with that? Why can't we get along?

Answer 12

This can be done as Stu did: http://www.cssplay.co.uk/menus/flyout_horizontal.html

Answer 13

• Define a solid background color for your image:

  .container img {background-color: white; }

• Define the css background-image property of your image in the src attribute:

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

Advantage: you do not need to change your markup

Disadvantage: sometimes using a solid background color is not an acceptable solution. This is usually for me.

Answer 14

Use Unit PNG Fix for translucent png-24.