Internet Explorer, Transparent PNGs, and jQuery Animation: The Black Background Issue Solved

This is an issue I ran into a few months ago. I couldn't find much documentation around this on the interwebs, so I thought I'd post my findings here. Hope this helps a few people out.

I was working on a project where I was animating the opacity and position of transparent 24-bit  PNGs with jQuery. Everything was going great until I fired up IE (big surprise). I hadn't thought it would be a problem, since both IE 7 and IE 8 both support PNGs with alpha, but as it turns out, like most things in IE, it's a little buggy. 

Everything displayed properly at first, but the second I animated the opacity, this nasty black background/border/fringe junk showed up.

Stupid IE.

After much googling, one semi-solution I found was to give the image the same background color as your page with CSS. That's all well and good if your image is on a  solid background. If you give the image a background color or image, the PNG displays properly on top of it, BUT that background is still opaque, and that pretty much defeats the purpose.

Not helpful...

THEN I remembered a RGBa to IE filter converter I had come across (thanks, Michael Bester). So I wondered what would happen if I gave my problem  PNGs a transparent background using an -ms-filter background converted from rgba(255,255,255,0). Fully expecting it not to work, I used the converter and tried this:

.item img { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE 6 & 7 */ zoom: 1; }

Kazaam!! Goodbye black, and hello working, animatable transparent PNGs in IE 7 and 8.

Booyah!

You can now use jQuery's fadeIn(), fadeOut(), and animate() on your transparent PNGs in IE 7 and 8 to your heart's content.  Hope this saves you some time and frustration down the road.

Dan works in our Falls Church, VA, HQ with clients such as PUMA, the Chronicle of HIgher Education, and Privial Medical Group. An ex-graphic designer who fell in love with code, Dan now spends his time building fast and accessible JS applications.

More posts by Dan