How to solve/hack fading semi-transparent PNG bug in IE8?

Question

As you know, IE6 has bug that can't display semi-transparent PNG file without using non-standard style like filter. In IE7, this problem is fixed. But It still has some bug about PNG file. It can't correctly display fading semi-transparent PNG file. You can clearly see it when you use show/hide function in jQuery with semi-transparent PNG file. The background of image is displayed with non-transparent black color.

Do you have any idea for solve this question by using jQuery.

Update

Let's see my testing

alt text http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

As you see, IE8 always incorrectly displays PNG-24 image. Moreover, IE8 still correctly display PNG-8 image when I fade(jQuery.fadeOut function) it only. But It incorrectly display PNG-8 image when I fade & resize(jQuery.hide function) at the same time.

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

Thanks,

Answer 1

Hey, I don't know if you're still looking for an answer. A couple of days ago I had the same issue animating a div with a PNG image inside. I tried many solutions and the only one that worked fine is one I coded myself.

The issue seems to be IE lacking opacity support and proper PNG support, so it breaks PNG display after applying an opacity effect (I believe animation frameworks rely on the propietary MSIE filter "AlphaImageLoader" for opacity effect on IE). The curious thing (to me that still don't understand very well) is that this issue can be solved using the same filter to load the image before the animation.

I wrote a simple javascript that applies the filter to every image with .PNG extension. My animations run fine on IE with it.

I copy the code below. I'ts framework independent (it's pure JavaScript), but you have to put it inside your framework's DOM ready event (or use domready.js, like I did).

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 worked fine for you and if animation runned smooth. Kind regards!