CODEWITHSUNDEEP
internet-explorercross-browserpngtransparency
Peter Turner
Peter Turner

Reputation: 11435

Removing blotchiness on transparent PNGs filtered with additional opacity in IE

I made a rotating image fader using Javascript and CSS to show images and unload them. I wanted to use transparent PNG's, I didn't expect or care if they looked good in IE 6, but IE 7 and 8 treated them with the same disrespect. Firefox and other modern browsers looked great.
Every picture with image.filter = alpha(opacity=xxx) in it looks like some of the transparency has some leftover noise, maybe from compression or something, no matter what I do to the picture, there's still something there.

I've done workarounds by placing JPG's on white background and using GIF's.
Also can someone tell me if this is actually a bug in IE?

Let me know if you need an example and I'll make one

Upvotes: 2

Views: 356

Answers (2)

Volomike
Volomike

Reputation: 24916

I had this same issue -- all the IEs would fail, but Firefox and all other browsers would not have problems.

The way I fixed it was to open up the PNG in Gimp, choose the Fuzzy Select Tool, set the threshold to 150%, check Antialiasing, uncheck Feather Edges, check Select Transparent Areas. Next, I clicked on the transparent areas -- all the ones I could find on the image and clicked the Delete key (to mean "Clear"). Then, I resaved the image again. This resolves the problem about 98% for most images in all the Internet Exploders.

I want to caveat that instruction a little, though. If you choose Fuzzy Select and it ends up selecting more than the previous transparent area, then set to 3%, fuzzy select, click Delete, then reselect again with fuzzy select at 150%, then click Delete, and it should be resolved without deleting any of your image.

If you don't have Gimp, it's cross-platform and free for Windows, Mac, and Linux.

Upvotes: 1

Chris
Chris

Reputation: 4966

You have to use 'finishopacity' with 'opacity' in order to get even opacity across the picture.

By the way, transparency doesn't work all that great in IE 6 either. I use Bob Osola's JavaScript fix for this, works great!

http://homepage.ntlworld.com/bobosola/

Upvotes: 1

Related Questions