Tuesday, August 15th, 2006

IE 7: Are transparent PNGs using Native support?

Category: Browsers, IE

There was a big hubbub when we found out that IE 7’s XHR support isn’t really native.

Jose Jeria did some poking around to see if transparent PNG support is native or not:

While developing an intranet for IE 6 only (yes, trust me, it sucks) I noticed that it was not possible to combine certain filters. Transparent PNG:s were used for buttons that needed to look disabled. A combination of the AlphaImageLoader with the Alpha filter should have done the trick, but it didn’t seem to like this combination. It should have looked like this:

But IE failed rendering the PNG with opacity applied to it, and instead it rendered it like this:

This must be a bug in IE’s filter implementation. So what I did next was to test the same image with opacity applied to it in IE 7, since they now claim they have native transparent PNG support. But… the results were exactly the same. Which makes you wonder if it’s not just the same filter as in IE 6 being applied under the hood

Posted by Dion Almaer at 11:39 am

4 rating from 43 votes


Comments feed TrackBack URI

Oh, freaking awesome. Just as I was getting excited about being able to use PNG’s in IE without being subjected to AlphaImageLoader’s numerous bugs…

Comment by Neftaly Hernandez — August 15, 2006

On the upside, you can use lower security settings to use XHR and PNG. That means paranoid intranets get a better user experience. Not much of a gain but better than nothing.

Comment by Dean Edwards — August 15, 2006

The following limitation in IE7 is known:

“Certain filters may not behave as expected due to how filters are implemented. Filters work by rendering the content of their attached element to their work surface and then modifying that surface before compositing it to the output surface. Because of this, alpha blending of a transparent PNG with non-binary transparency may lead to unexpected results. For example, applying a BasicImage filter with an opacity attribute to an IMG element with a transparent PNG will fill the work surface with the transparent PNG alpha blended with a solid gray background. The work surface will then be alpha blended at the specified opacity level with whatever is under the filter.”

Comment by Tevo — August 16, 2006

Regarding Tevo’s comment about IE7 “limitation”…

This is not a limitation; the huge majority of browsers do not have any problem with it so it’s rather a misconception in IE7. How easy to throw the stone to filters… But hey, as usual, as soon as IE is mentionned what would you expect?

Comment by nat — August 16, 2006

@nat: That is why I wrote “limitation IN IE7”. Oh dear.

Comment by Tevo — August 16, 2006

@Tevo: ^^. Now that we talk about it, wouldn’t it be more accurate to talk about IE as a limitation in itself?… [sarcastic mode OFF]

Comment by nat — August 17, 2006

looked like what? where is the picture?

Comment by poni — August 17, 2006

Man, snook.ca’s design makes me want to die. Besides, it’s not arguing we’re tired of, it’s pointing out IE’s numerous and horrible flaws.

Comment by JDP — August 18, 2006

Is that die in a good way or a bad way? I can’t tell. If it’s good, thanks. If it’s bad… well, I’m changing the design. :)

Comment by Jonathan Snook — August 18, 2006

IE7 PNG transparency, and Flash

Alpha support for PNG images is one of many fixes and features we can get excited about in IE7. Well… sort of. Following news that the new PNG transparency support might not be as native as previously supposed, I ran…

Trackback by lowest-common-denominator — August 23, 2006

See http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx for a post about how alpha channel support was achieved for IE7.

Comment by Dave Massy — August 28, 2006

For ie7:
If you give the image style an AlphaImageLoader and then wrap it with a container to set the Alpha filter it seems to work – See the example here: http://miedlar.com/dev/pngtest/

Comment by bmiedlar — September 12, 2006

bmiedlar, not that the png’s quality is ruined by doing this. Also, it doesn’t even show up in IE 6, adding more headaches.

Comment by José Jeria — October 2, 2006

Agreed – its not the ideal solution – but usable for ie7 if you need it to work – as it still has png advantages over gifs for overlays when the background is not consistently known. http://miedlar.com/dev/pngtest/color.htm

Comment by bmiedlar — October 2, 2006

Leave a comment

You must be logged in to post a comment.