I am yet again looking into the best way to get transparent PNGs to display correctly in a Rails app.  This is, of course, a well-known problem, but I've run into problems with the common solutions.

The complexities is that
  • Rails' approach of appending cache-busting timestamps on the end of image URLs sometimes confuses solutions looking for image references ending in ".png."
  • I want this to work on sites that potentially use a large number of small icons.
  • I want this to work on images that are not initially displayed.  I have a sitemap that is a dynamic directory tree, with nodes that can be clicked on to display the child nodes.
  • I'd also like to use it on CSS background images.

Bobosola Solution

This solution (with no apparent attribution) uses Javascript and the AlphaImageLoader filter.

It requires a fix, helpfully provided here, to match image URLs with a regular expression, rather than just a straight suffix.

For some reason it only seemed to work with some of the images on my page, and I couldn't figure out what was causing the problems.  This approach also doesn't address CSS background images.

TwinHelix Solution

This solution by Angus Turnbull utilizes custom Microsoft CSS "behaviors."  It works out of the box with Rails image URLs, which was nice.

The first problem I ran into is that it is relatively slow, as it iterates through each image in the document.  It was taking five seconds to step through each of the GIF images that made up the tree structure.  I addressed this by targeting the behavior to only images with a particular CSS class.

While I was having the initial slowness problem, I noticed that images that were initially hidden (CSS "display: none;") were not showing up when their display was enabled.  But this problem went away when I targeted by CSS class.  Hmm.

This approach supports CSS background images.

So I'm going with this solution for now.

Leave a Reply.