A new IE PNG Fix

A new fix for IEs lack of inline PNG transparency support

At the moment it seems our design team just keeps churning out sites that need PNG’s all over the place. We always try to use GIF’s where possible, but when those partially transparent, gradient-based nightmare assets pop-up, a GIF just doesn’t cut the mustard.

Until recently we’d been using Twin Helix’s solution by Angus Turnbull which, in general, was a great (and the only really viable) fix for most projects. That was until we discovered a major memory issue when using this in combination with the Google Maps API. Researching the issue (using Kevin Langdon’s immensely useful ServiceCapture) revealed pages with more than a healthy amount of PNGs, the .htc approach sucked-up some serious memory. The cause was not the script itself, but a result of executing the call via behavior(). This not only executes the script in an arbitrary order, but makes additional HTTP requests for the .htc file on each applicable element!

On a page with potentially dozens of PNG’s, IE was making too many HTTP requests, running multiple parallel processes and falling on it’s ass (which admittedly it does do oh-so-well). Consequently we decided it was time to write our own fix, in the guise of a plug-in for the wonderful jQuery framework.

The plug-in is essentially based on the original Twin Helix fix but focusing on reducing processes, speeding-up the render time and ultimately killing all those unneeded HTTP requests. At it’s most basic, the fix can be applied to elements as such:

$("img").pngfix();

Of course you’ll need to implement jQuery along-side this plug-in, but that’s a pretty simple affair. For full technical documentation, please go to the PNG Fix project page.

Download the Javascript source file (jquery.pngfix.js 8kb)