Do not use AlphaImageLoader to “fix” transparent PNGs in IE6

If you (have to) still support Internet Explorer 6, you may (or almost certainly will) encounter the problem of Internet Explorer 6 not supporting transparent PNGs. There are a variety of workarounds for them. Some use JavaScript to silently replace files, but the most common way seems to use the AlphaImageLoader in your CSS.

Let me quote one of the many many sites that give that advice:

#truck {
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

Looks nice and clean and seems to work. Well, there are two issues with it. The first one is a rather small issue:

The one big problem with this method, though, is that it if a link is placed over top one of these filters, it often won't work. That's not to say it always won't work, but it often won't. Depending on the styles of the elements and even the size of the image sent in to the filter, it might work.

The second one is a bit bigger: It can deadlock Internet Explorer 6. It's not too fun if half of your clients report that their browser is locked up for 10 minutes everytime they access the site, and for me it's the reason to flat out reject using AlphaImageLoader ever again.

George V. Reilly has an excellent blog post about this issue, and he also has the technical explanation:

To understand the problem, here is an explanation from the IE team (thanks Peter Gurevich!):

  • Each IE 6 window is a UI thread.
  • The HTML page and any script you wrote for the page run in the UI thread. Therefore filters in your page or in script will download on the UI thread
  • IE’s implementation of the AlphaImageLoader filter downloads images synchronously
  • Asynchronous loading of an image or successive images on the UI thread has the potential to hang the browser and adversely affect the user experience.

Thanks a million times George, that post of you is truly worth gold!