PNG, IE and Rails

One of the biggest complaints about IE these days is a lack of support for the full PNG spec, especially the part that covers alpha transparency. Microsoft has said, numerous times, that the lack of support stems from the fact that the alpha transparency portion of the spec is "optional", and that making IE support it is too expensive. Mind you, there is a collection of well-known workarounds involving JavaScript and IE filters, but, well, there you go.

We've been using Ruby on Rails for our development efforts for a while now, including for our website. We recently added some PNG graphics, utilizing semi-transparent shadows, which looked great on Firefox/Safari. On IE, however, we know they would look terrible. So we added one of the publicly available scripts that fix the problem. There was only one issue: it didn't work. At all.

After putzing around with different versions of the PNG fix script, and having none of them work, I finally started debugging. The scripts were being called, but never finding any PNG images to modify. So, it finally became apparent: the script I was using was looking for any IMG tag whose "src" property ended in ".PNG". Well, we use Rails. And Rails, by default, appends a randomized number to the end of URLs to defeat IE's URL-based caching mechanism. This means that none of our images ever matched the PNG script's test.

The solution was simple. Change:

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

to

if(/\.PNG/.test(imgName))

and suddenly everything works.

An example of the law of unintended consequences (appending randomized numbers to every URL breaking a fix for non-transparent images) crashing into the law of unanticipated difference (don't ALL image "src" attributes end in .png, .gif or .jpg?) Like a Reese's Peanut Butter Cup of Doom.

Get In Touch