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?

score 11 · Answer 1 · answered Nov 21 '10 at 11:29

11

For me it worked to just include the filter property with blank value in jQuery's .animate()function

Maybe this will work for you, too.

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

Additionally you might have to remove the filter property from your button's CSS.

answered Nov 21 '10 at 11:29

Björn Kaiser

9,882
4
37
57

@goksel Can you add the jQuery version you used, please? :) – Björn Kaiser Dec 21 '11 at 19:14

score 7 · Answer 2 · edited Sep 24 '11 at 06:15

7

filter:'' hack does not work with current jQuery (1.6.1) anymore

edited Sep 24 '11 at 06:15

Yi Jiang

49,435
16
136
136

answered Jun 22 '11 at 09:35

nicmare

170
3
11

score 5 · Accepted Answer · answered Mar 04 '10 at 03:40

5

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.

answered Mar 04 '10 at 03:40

Sampson

265,109
74
539
565

1

No problem. Leave the question open for a while, maybe we'll both be fortunate enough for me to be wrong :) – Sampson Mar 04 '10 at 03:44
Related discussion seems to confirm my suspicion: http://forum.jquery.com/topic/animating-opacity-doesn-t-work-in-internet-explorer – Sampson Mar 04 '10 at 04:46
1

**Bzzt** New solution to an old question – Yi Jiang Aug 31 '10 at 10:08

score 4 · Answer 4 · answered Aug 31 '10 at 10:07

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...

score 2 · Answer 5 · answered Aug 03 '11 at 14:39

2

I think there is a real solution here : http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

In my case it solved the awefull black bg on my animated png image with transparent background. It worked like a charm. Tested on ie7+ I can't test ie6 for the moment.

Hope it will help every one :) Julien

answered Aug 03 '11 at 14:39

Julien Knebel

221
2
4

One thing I found is that I needed to change the gradient mentioned in the post you linked to. For some reason, I needed to also make two separate declarations for IE to properly "see" the "zoom: 1" attribute. See my new answer below for details. Not enough room or formatting in this comment. – Sean Kendle Mar 19 '14 at 18:44

Sanooj · Answer 6 · 2011-09-14T10:35:55.247

2

Use PNG image for modern Browsers ( mozilla , Opera, Chrome etc ) :

background:url(../images/banner01.png) no-repeat right 13px;

Add this For IE ( Use another CSS Or use IE hack )

/* ie fix */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png",
 sizingMethod="crop");

edited Sep 14 '11 at 10:35

answered Sep 13 '11 at 19:00

Sanooj

2,637
15
20

score 1 · Answer 7 · answered Aug 31 '10 at 09:57

1

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

answered Aug 31 '10 at 09:57

Johannes

321
1
3
7

score 0 · Answer 8 · answered May 24 '12 at 19:32

0

There is a library that supposedly solves this problem: jCSML. I have tried it and it works to animate transparent pngs in IE 7+.

answered May 24 '12 at 19:32

Chris McCall

10,317
8
49
80

score 0 · Answer 9 · answered Nov 11 '12 at 11:20

0

HERE IS THE FIX! Update to the latest jQuery. Thats it. It works after that.

answered Nov 11 '12 at 11:20

eric

43
1

score 0 · Answer 10 · answered Mar 19 '14 at 19:06

Thanks to Julien for his answer, it lead me in the right direction!

However, I was still getting a gray halo around the text during the image opacity transition. It looked fine when it was static, but it was still creating a strange slight grey halo (IE 8). I fixed it by changing to the values below.

Also, I had to separately declare the "zoom: 1" property, because IE 8 was just smashing that value to the end the background property. Same thing with background-color: transparent; IE sucks.

My working CSS:

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

.classOfParentElement img {
    -ms-zoom: 1;
    zoom: 1;
    background-color: transparent;
}

Note that I had to change endColorstr=#00FFFFFF to endColorstr=#FFFFFFFF.

To reiterate Julien, this solution came from Viget.com.

Transparent PNG animate problem on Internet Explorer

10 Answers10

Linked