I’ve been looking for any solution to a problem I am having, but have of yet found no such solution. I am using the jquery fadein and fadeout on a transparent png. In firefox, this works great. However, in IE7, during the fade, the transparent area is black. In Chrome, this area is white.
This may have something to do with the way these browsers handle opacity on transparent png’s? I’m just not sure, and I didn’t find much help on the net.
Any suggestions / solutions would be much appreciated. Thanks!
The solution I came up with is not ideal, so first let me start by asking anyone who comes up with a solution and runs across this thread, to please post.
I first checked to see what kind of degradation I would get using transparent gif’s. While this worked to an extent, the quality and transparency was not acceptable, so I moved on.
I resorted to only performing the fadeIn and fadeOut function when the user was browsing from Firefox or Safari. These browsers are able to perform a fadeIn and fadeOut on a transparent png.
For this to work in IE 6, you need to make sure to use one of the transparent png fixes on the image. I use an edited version of Unit Interactive’s PNG fix (found here). My edit takes out the background fix code and targets only specified images.
While I’m still searching for a true fix to this issue, this will suffice for now. It minimally effects this website and still keeps the nice transparent images.
The unitpng fix does work to fix both images with transparent png’s as well as transparent png’s used as element background images. It doesn’t work well with a css-sprite implementation though as it alters background positioning.
I’ve been wrestling with the same issue, and just had a breakthrough! We’ve established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you’ve got an opaque background, and that pretty much defeats the purpose.
Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway…