An IE7 PNG Fix Drupal Module

Ah, Internet Explorer and transparent PNGs, a match most definitely not made in heaven.

Everyone knows that IE6 had poor PNG support, but all those problems were solved in IE7 right? Please? Sadly, while things did improve dramatically in IE7, if you have ever seen anything like this first image you've found the reason this IE7 PNG Fix module exists.

While IE7 added alpha transparency support for PNG images, it did so in a way that is not compatible with javascript based fade-in/out transition effects. The reason for this is that IE7 uses a "filter" to render the alpha transparency and can only apply one filter at a time to any given page element. A javascript transition effect, like those created with jQuery, also require a filter. Two filters applied to one image cause problems. For more information see http://blogs.msdn.com/ie/archive/2005/04/26/412263.aspx, especially the first point under "There are also a couple of limitations worth mentioning".

Fortunately there is an easy work around for this which involves wrapping the image so that one filter can be applied to the image and the other to the wrapper. That, in a nutshell, is what this drupal module does. As you can see from the second image, the transition now works properly and the transparency is maintained.

This module is a "drupalisation" of a jQuery script written by Darko Zoroja that is available here: http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem. To use it you will need to provide a CSS class that identifies the effected PNGs to the module, it will then use Darko's script to dynamically generate a wrapper element that will have the transition filter applied to it so that the original PNG transparency filter will be the only one directly applied to the PNG image.

In case you are wondering why this module is on GitHub.com and not Drupal.org, the quick answer is that the world does not need another IE specific PNG fix Drupal module. The good folks at Drupal.org suggested this module should be incorporated into one of the existing IE PNG Fix modules. I agree that this would make sense, but wasn't able to wrestle any interest from the other modules' maintainers and so, after procrastinating almost long enough for IE7 to fade from relevance, I finally decided to put it up on GitHub.

You can download the module from: https://github.com/thejibe/IE7-PNG-fix