JavaScript opacity Anti-aliasing bug in Internet Explorer

Question

I have encountered an annoying bug with internet explorer on a javascript animation I made. I have a greyscale image of a city skyline which fades its opacity to 0, revealing a full-color skyline.

It looks great in all other browsers, but IE reveals artifacts. (around the taxis, and the barr+barr text). A friend told me this is because of some weird bug with animating opacity with javascript in IE. Something to do with anti-aliasing and an assumed black background? I dont really know.

the site: http://www.roughgiraffed.com/barrandbarrbags/index.html

I am currently regretting not building this page in flash. Please help me fix this so it was not a horrible waste of time.

Thank You, Zach

Answer 1

The alpha filter (used by jQuery as fallback on IE where CSS opacity isn't supported) can't co-exist with an image that has an alpha channel, like the variable transparency on the PNG. It forces the partially-transparent-black pixels at the edges of your shapes to fully-opaque, causing the artifacts.

You can get a better result by putting the alpha filter on a <div> that contains the semi-transparent image. (If you need IE6 support, you will also need a PNG fix on the image itself.) This still isn't quite right as the opacity of each pixel is taken as the minimum of the image opacity and the filter opacity, instead of the two multiplied. But it often still looks OK, and won't introduce the too-opaque problem that you're getting here.

Answer 2

Easiest fix - change the images to gifs. Since you're city image doesn't have any gradients, the advantage of the alpha channel support in the png format is not really anything you need. This should work all the way back to ie6.