Alex Rivera | Logout

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

Asked 2009-07-30T04:32:49.130
35

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,

jquery internet-explorer png
Edit
Report

2 Answers

2

Why don't you try with PNG8. PNG8 is widely known as full transparent as is GIF file format. However exported with Fireworks it can be semi-transparent as is PNG24. The advantage is that IE6 displays the PNG8 with semi-transparent pixels as it is a GIF - or with full transparency, but IE7 and 8 display it correctly as PNG24 and if you fade it with jQuery or whatever js library it will no display the background with gray, because it does not use the famous -filter property.

answered 2009-07-30T04:48:51.663
0

This can be done similar to what Stu has done here: http://www.cssplay.co.uk/menus/flyout_horizontal.html

answered 2010-06-10T19:03:51.477

Your Answer