Transparent PNG animate problem on Internet Explorer

Question

CSS Code:

#btn{
  background: url(transparent.png) no-repeat;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

JavaScript/jQuery:

$("#btn").animate({opacity:1,"margin-left":"-25px"});

I don't have any problem with the code above on Firefox, Chrome and others. But it does not work on any version of Internet Explorer.

The problem is the PNG image is rendered strange, background of the transparent PNG looks black. When I remove opacity effect, there is no problem.

What is the solution?

Answer 1

There is currently no solution for this that I'm aware of. Just have to wait for IE to catch up with the rest of the world. I had to abandon such a feature in a recent project just days ago. You unfortunately cannot have a feathered-edge PNG with IE fading in and out with jQuery.

Answer 2

Interesting note: jQueryTOOLS uses a GIF in all IE versions as bugfix for tooltips. Demo

Answer 3

Hey, looks like Sampson might have been wrong. See Dave Shea's post on this: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

I'm just going to dump three paragraphs of the solution here:

Of course, no version of IE supports the CSS opacity property yet, so jQuery instead applies the opacity by exploiting the IE-proprietary AlphaImageLoader filter. This ends up being the root cause of the (seemingly well-known) bug. The suggested fix is to apply the transparency to the parent element instead, but I’ve had little success with that workaround.

What did work was a little library called DD_belatedPNG that applies PNG transparency via VML instead of AlphaImageLoader. It’s designed for IE6, but it works just fine in IE7 as well. For IE8, I was forced to throw out an X-UA-Compatible meta tag and step IE8 down to IE7 mode for this particular page.

It’s still not perfect. I noticed a faint white bounding box poking through at lower opacities that forced me to slightly adjust hover effects for all versions of IE. But you know, for all that, it’s darn well good enough.

---

Mmmhmmm... It's odd that this solution didn't pop up when this question was asked 6 months ago. Sure, this blog post didn't exist, but the solution had been around for quite a while. Strange that nobody noticed it...