IE8 Still Failing PNG Alpha

So as you all know, there was no support for PNG transparency in IE6. People came up with many solutions including using the filters in IE (or using VML). When it was time for IE7, instead of working on actually fixing the problem, the IE-team just started using the popular solution in IE6 (i.e. filters) for fixing IE7 PNG problem . So now instead of the web developer calling the filter, IE7 will do this for them.

Anyway it turns out that the CSS property opacity is also implemented using filters in IE. Also, it turns out that things will go haywire if more than one filter is applied to the same element. This is happening in the above mentioned blogpost.

Now the author of the article found that using VML instead of filters will solve some of the problems in IE7. There is no known way to fix this issue in IE8 other than using the Emulate-IE7 tag in the header (shudders).

What the author is about to discover soon is that VML + JQuery does not go well either. Calling element.type on VML elements (JQuery does this internally all the time) may cause your browser to freeze up and require a restart (in IE6, IE7, IE8) or cause JS error in (in IE9).

More stuff will break if you try to animate things around in the screen using either of the solutions. And don't get me started with zooming in/out elements with PNG transparency with opacity.

All I can say is that I wish you all the best.

BTW Here is an explanation from the author of the feature in IE7: http://blogs.msdn.com/b/ie/archive/2005/04/26/412263.aspx

EDIT: Note that the issue with VML + JQuery is not just when you refer to a VML element. It can happen even if you are referring to some other element in your JQuery selector. The solution is to change your selectors randomly (i.e. being more/less specific) until the selector does not give an error, but this is not guaranteed to work all the time. You can try editing JQuery itself to fix the issue, but there are many places you will have to edit, it is just a PITA. The JQuery team may fix this issue from their side though.

ugh ran in to that about a month ago when doing some fades on a header carousel, our solution was to swap all png's for 8 bit png's during the fade then swap back when done... fucking ridiculous and less then perfect to the discerning eye.

the depth and breadth of ie bugs is amazing, ive been doing this shit for years but big uglys like this still just keep popping up.

zoom: 1 wtf is that?

I like the implication of the first comment, that doing alpha channel stuff is at least older than Internet Explorer, and almost as old as Microsoft.

As a side note: it doesn't work with the "Reader" feature of Safari - the background of these images is always white (with a small dark bullet on the bottom right).

Why do people keep talking about IE8? Is it true for IE9?

A simple solution: send it out in gif, the patents have expired at this point and it actually works.

It properly doesn't look as good, but thats what you get for using a crap browser.