Originally intended to be used as a better method for fixing IE6’s inability to support alpha in PNGs, DD_BelatedPNG has found a new use. As most of you know, IE doesn’t do so well when trying to apply Opacity to a PNG with alpha. It blacks out the image or does other bad stuff. There are various workarounds to this but they all have drawbacks. Today I stumbled upon the idea of using DD_BelatedPNG. For those who don’t know about this wonderful script, it turns PNGs (either images or backgrounds) into VMLs which fully support the alpha channel. This is by far the best way to achieve alpha PNGs in IE6 as it is the more resource efficient than using the alpha loader filter and it supports things like background-position that the filter doesn’t.
The problem that most people run into at some point is that no version of IE supports opacity on alpha PNGs very well. Want to make a neat popup box with a snazzy drop shadow that fades in? No can do. You need to lose the drop shadow, lose the fade, or make the drop shadow show up at the end of the animation.
Today I had the idea of using BelatedPNG. My presumption being that while IE sucks at handling opacity on pngs, maybe it handles it better on VMLs. Sure enough, it works perfectly! This is very excellent for a project I’m working on that has some specific animation requirements. I thought I was going to have to fall back on flash, but I won’t have to now.
A couple problems remain. First, in IE7 the script seems unable to figure out the dimensions of the image. This can be worked around by manually setting the dimensions in the CSS. The second problem is that DD_BelatedPNG doesn’t work with IE8. IE8 introduced some changes to VML. I don’t really have any expertise with VML so I am at a loss to fix the problem. I can get IE8 to stop throwing errors when loading the script, but it doesn’t actually work.
I’ve contacted the author of the script, but it seems that his updates to it are very infrequent. My hope was that maybe someone here would be able to come up with the fixes to make it work in IE8. I THINK it just requires minor modification by someone who knows how to work with VML, but I’m not sure. If we can get this working it would be a boon to anyone trying to mix opacity with alpha PNGs, as it would finally bring support to all major browsers.