Who knew IE6 and transparent PNGs could inspire so much discussion?
When you’re churning out tips and tricks on a regular basis, you quickly learn to state things like this:
“I had Problem X, and my solution was Y given constraints Z.”
… instead of this:
“The only way to solve Problem X is Y.”
I was reminded of this lesson last week, after I posted a series of beginner-level tutorials about overcoming some of IE6′s shortcomings with jQuery. My two-part piece on transparent PNG support got picked up by the kind folks at Ajaxian, and boy did the comments come. Between the two sites, we’ve heard from 20 people so far. A few were from the usual cranky haters. (Thanks to whoever felt the need to write, “Is this year 2001? IE6 png transparency? News on Ajaxian? Good heavens…” instead of just moving on to the next post.) But the rest provided lively debate and some valuable alternative approaches to the problem.
For review, here are the posts (with comments):
And here are some of the various approaches suggested:
-
“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.”
“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…”
Unfortunately, most web sites can’t afford to adhere to this attitude. IE6 still has enough market share to matter, and having a site that looks terrible in the No. 2 browser (behind IE7) has a way of discouraging prospective clients from, you know, hiring you as a web development company. Besides, if the whole point of this exercise is to make IE6 look good for as many users as possible, what’s the point in serving up an entirely separate image with no transparency? That defeats the entire objective.
-
“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?”
This is basically the same solution I advocated: Removing the bottom background image and re-inserting it as a foreground image. This version doesn’t leverage jQuery, and it’s paired with a different base PNG-fixing script, but it looks really useful.
I’m sure the poster’s question was rhetorical, but it’s actually an interesting one. I’d argue that transparent PNG support is becoming a bigger issue now than ever before, because the one browser that doesn’t support it is on the way out. This has emboldened designers to create layouts that that demand the layering of irregularly shaped objects atop non-solid backgrounds – and it’s pushed front-end developers to accept such designs rather than fighting against them because of the IE6 problem. As a result, many developers are grappling with this problem for the first time.
-
“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.”
This solution sounds awesome for a site with the infrastructure and resources to implement a server-side solution. Unfortunately, for our mostly static, CMS-based site, that’s not the case. I’d love to see the code for this solution and learn whether it could be implemented in other server-side frameworks, such as Rails.
-
“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.”
This sounds like another promising solution. I wonder what the resulting PNGs look like with a single alpha channel. Do they end up with halos, the same way that rounded-corner GIFs do? Could somebody point me to a site where this utility is in use?
-
“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.”
Interesting. This sounds like great news for GWT-based sites. I’m surprised that more of the big Ajax libraries don’t implement a solution to this problem.
-
“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.”
“[S]ure, 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.”
Again, my requirements were rounded corners on a non-solid background. Transparent PNG-8 images only work in situations where an old-fashioned transparent GIFs would work. Otherwise, you’d end up with ugly dithering. If you’re cool with that, why not just use a GIF in the first place and save yourself the drama?
As for the single, anecdotal report of alpha filters crashing IE6 on one particular site, that’s news to me. Alpha filters are Mircosoft’s official recommendation for dealing with PNG support. Given the number of alpha-filter implementations that have been in use since 2001, it seems unlikely that this problem is widespread.
-
“I’m glad you found my script useful! Yeah, sadly the MS filter doesn’t support background-position or -repeat. The v1.0RC5 script will stretch the image to cover the element when repeat is specified. Perhaps in future I’ll add a separate component to create many nested elements to ‘mimic’ a repeating background where required.” –Angus Turnbull, author of IE PNG Fix
“I created a cleaned up and enhanced version of the original PNGFix that also supports background-position: http://gedankenkonstrukt.de/?action=show;id=58. It’s not thoroughly tested yet, but it seems to work. Also, it doesn’t rely on jQuery.”
As I said in my original post, if automatically handling all the possible combinations of background-repeat and background-position were easy, it probably would have been tackled before. The enhancements suggested by Turnbull and the other commenter are a step in the right direction, but neither deals with my problem: bottom-aligned background images. If I weren’t busy with eight other projects, I’d tackle a truly universal background-position handler. I’m sure I’d learn a lot! One more project for the backlog….
-
“My knee tends to jerk whenever I see script creating static web design elements. Have you thought of using SVG, like in this page: http://realtech.burningbird.net/design/off-painting/? Safari, Firefox, and Opera all see the curved capstones around the comments, while IE doesn’t see the capstones (neither is there space taken up by the capstones in IE).
“I even have the page setup to sample the header graphic to generate the gradient color using server side technology that updates the CSS setting. The point is, though, there’s very little SVG needed for this example, and the effect degrades cleanly for IE, which can’t see any of the SVG.”
That’s a great solution for trivial, decorative transparencies. Nobody’s going to miss the rounded corner on a blockquote. But turning your site’s entire sidebar into a blocky, curveless nightmare isn’t the same thing. In the example cited, PNGs never would have been required; transparent GIFs would have done just as well.
-
“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.”
“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.”
With a pure CSS solution, you can’t apply the PNG filter to the base img tag because you’ll mess up all sorts of other, non-PNG images. Each additional image therefore requires additional CSS work. That’s just not practical when you’re working with a CMS where the developer is not involved in day-to-day maintenance. My No. 1 objective was to make transparent PNG support automatic for the business users who maintain the content on my site. With a script-based solution, when those users want to throw a transparent PNG into a case study or some other page, it’ll just work.
As for the flash of unstyled content, yes, it’s a drawback, but not a deal-breaker given the business requirements.
For the record, I had zero problems with Turnbull’s script once I remembered to use absolute paths for everything and give all of my foreground images widths and heights.
-
“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.”
Besides the fact that this poster is suggesting the exact same solution offered in the article upon which he was commenting, he has a point. The allure of “put[ting] no effort at all into PNG support” is exactly why many sites choose to go with a script-based solution.
-
“I’m actually working on a js library dedicated to elements what renders png images. Take a look : http://png-hack.googlecode.com.”
This repository states on its homepage that it doesn’t tackle the problem of background images, but hey, why not throw one more potential solution onto the list?
Anyway, as you can see, there are countless solutions to this problem, most of which don’t involve punishing people unfortunate enough to be stuck using IE6.
