Thursday, April 10th, 2008

Ajaxian Featured Tutorial: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery

Category: CSS, JavaScript, jQuery

During his work in redesigning the Pathfinder web site, Brian Dillard came across the infamous IE6 transparent PNGs issue and used two methods to tackle the issues. He decided to do a nice write-up explaining how he worked around the fact that IE6, while it would render PNGs, would not retain their alpha-channel transparency and produce unexpected colors in place of the transparency.

IE6’s lack of transparent PNG support is appalling, but Microsoft does offer a proprietary fix for the same problem: CSS behaviors, which are a non-standard extension to the CSS spec. By applying a special behavior to your PNG images, you can force IE6 to display them with their alpha transparency intact.

Coding this CSS behavior on an image-by-image basis would be tedious. Luckily, developer Angus Turnbull has released an open-source script that can be used to apply the behavior globally: IE PNG Fix. The current production release is v1.0 RC4, but a preview of v1.0 RC5 is also available.

While the IE PNG Fix script to dealt with the majority of the PNG transparency issue, there was still one problem that the script could not correct:

There is, however, one drawback to Turnbull’s script: It can’t account for PNG background images with a background-position other than top left. It will restore the alpha-channel transparency to such images, but it will reposition them to top left, potentially making your designs look even worse than they would have with an ugly gray halo where the transparency should be.

Brian turned to jQuery to help him resolve this by allowing him to re-insert the background images previously removed from IE6 as foreground images.

Full details, including code, of his solution can be found in his two part series linked below:

Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 1 of 2)

Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 2 of 2)

Posted by Rey Bango at 2:12 pm
17 Comments

+++--
3.2 rating from 58 votes

17 Comments »

Comments feed TrackBack URI

Fixing pngs with javascript is bad practice. You’ll end up with a flash of unstyled content. CSS and conditional comments would be a better choice.

Comment by staaky — April 10, 2008

I know a great way how to solve this problem..

Save your png’s also as GIF (with removed shadows or whatever uses transparency)

Than use gifs instead of pngs in your css.

It will look worse in IE6 (no transparency stuff) but that’s the problem of @#$ users who still use ie…

Comment by zero0x — April 10, 2008

I deal with the background position problem by using a java servlet to generate a new image. This works for positioning of a whole background image and picking out parts of a sprite sheet. The servlet will also set a background color if I specify one, so in that simple case I don’t even need to use any extra css. This might not be the best solution for everyone, but it works great for me.

Comment by Matt — April 10, 2008

A technique we used at Yahoo! was to run the images through pngcrush http://pmt.sourceforge.net/pngcrush/ and convert all the levels of alpha into one alpha – IE can support a single alpha channel, so you’ll get an image that looks fine in all other browsers and doesnt break in IE6

Comment by triptych — April 10, 2008

@triptych: What option is that?

Comment by Matt — April 10, 2008

GWT ImageBundles also solve this problem neatly and also handle CSS sprites at the same time, see http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/impl/ClippedImageImplIE6.java for the trick used.

Comment by cromwellian — April 11, 2008

The CSS Behavior I found works for background images. I put no effort at all into PNG support. It’s called iepngfix and it was written by Angus Turnbull, to whom I’m extermly grateful.

Comment by kim3er — April 11, 2008

Is this year 2001? IE6 png transparency? News on Ajaxian? Good heavens…

Comment by deadcabbit — April 11, 2008

I’m actually working on a js library dedicated to elements what renders png images.
Take a look : http://png-hack.googlecode.com

Comment by Yves — April 11, 2008

Or just spend a few minutes in your graphics editor of your choice to convert your PNG32 to PNG8 transparency.

Internet Explorer displays PNG8 with transparency just fine and saves a shedload of slow, bloated code to fix the issue.

Comment by ck2 — April 11, 2008

here’s an update that i did to fix some issues with Drew McLellan’s bgsleight.js

http://www.naterkane.com/blog/2007/03/26/bgsleight/

do people still not know how to work around IE6’s limited png support?

Comment by naterkane — April 11, 2008

I tried Turnbull’s script probably a year ago and remember it being very buggy. For alpha transparency in IE6, I’ve been using the AlphaImageLoader filter for years, and that has worked better than any other method for me.

Comment by WillPeavy — April 11, 2008

@ck2, sure, as long as your choice is fireworks. If it’s anything else, then don’t bother, nothing else supports png 8-bit alpha. Unless you don’t mind having simple 1-bit (on/off) transparency.

As for the solutions involvinng the directx alpha filter, behaviors, and/or javascript: DON’T DO IT. unless you want to risk crashing the browsers of a significant portion of your audience, as detailed here:
http://blogs.cozi.com/tech/2008/03/transparent-png.html

Comment by Breton — April 13, 2008

I’ve used bgsleight, slightly modified, for years for the logo on my website … which also has been dormant for a couple of years.

I only did it out of stubborness, and wanting to prove it could be done. After realising the amount of issues with it, I’ve since given up on using transparent PNG’s for IE6.

It’s time IE6 users upgrade their browsers, or deal with the fact that the internet has evolved while they were sleeping.

Comment by MorganRoderick — April 13, 2008

I agree, it’s just not worth the effort especially when all they’re doing are anti-aliased rounded corners! I posted a response to this article a few days ago though looks there seems to be a problem with Trackbacks on Ajaxian. Basically I think its an overkill and demonstrate an alternative solution, see:

http://yelotofu.com/2008/04/the-png-transparency-trap/

Comment by caphun — April 14, 2008

@all commenters:

Thanks to everyone who posted alternative solutions to this problem. Many seemed very useful, though all of them make different tradeoffs than the ones we chose to make. Given the amount of debate this has generated as to the “right” solution, I’ve spun this into another post here:

http://blogs.pathf.com/agileajax/2008/04/post-1.html

As far as why my little old post about a decidedly un-sexy topic got picked up by Ajaxian in the first place, well, duh! It’s because I used “jQuery” in the headline. I thought everyone knew about the jQuery team’s secret conspiracy to take over the world. :-)

Comment by Brian Dillard — April 14, 2008

@brian: I just read through your responses to all commenters, in which you failed to look at my response above. I still think you are over thinking this problem. If you use PNG8 transparency, you would not have to include any of those hacks such as IE PNG Fix, jQuery or IE6 specific CSS. You’d end up with slightly jagged edges in IE6 but what you’d get is better performance, less bloat, and graceful degradation even with JavaScript switched-off. Btw, I love jQuery!

Comment by caphun — April 15, 2008

Leave a comment

You must be logged in to post a comment.