Jump to content
GreenSock

Sumit

IE8 animating opacity of transparent png

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there,

 

animating opacity of a png with transparent parts shows bugs in IE8, i believe because the same MSIE filters are used to animate the opacity and to display the transparency of a png - and now they overwrite each other.

 

This is a screenshot in the middle of the animation.

5vmp6lM.png

 

I can confirm that this has to do with the filters, because if i apply 

filter:alpha(opacity=80);

to an element with a png (with transparent parts) as a background-image, the effect seen in the screenshot is permanent.

While i can fix this by not applying the opacity filter on the element, i can't fix the animation part.

 

Here's a stackoverflow-question about the same issue. If you're considering adressing this issue in GSAP animations, keep in mind the issue is not only for IMG tags but for background-images as well.

 

I'd provide a fiddle, but neither JSfiddle nor Codepen seem to have IE8 support (who knew? :-/ )

 

 

On a sidenote: "Drag to Resize" in this forum editor doesn't seem to work (current Chrome, Windows 7).

Link to comment
Share on other sites

Yes, the trouble with animating the opacity of transparent pngs in IE8 has been known for quite awhile. From all our research it appears that the bug is so deeply ingrained in IE8 that a suitable solution has escaped us (and apparently the rest of the developer community as well).

 

We would be very interested in seeing any solution that works in IE8, so feel free to zip up a demo of what you have found. Even though the codepen editor doesn't work in IE8, the "fullscreen" result view does, so feel free to still create the demo on codepen if you chose.  

  • Like 1
Link to comment
Share on other sites

If the png is pulled from a background-image, have you tried setting the initial css for the png to:

.imagePNG {
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="your image url", sizingMethod="crop";
     zoom:1;
}

or setting the png image css with the set() method?

 

Also usually with IE and opacity its best to also add the zoom property to make sure that element hasLayout.

 

Is your PNG a png8, png24, or png32?

 

also what about animating the actual filter alpha opacity using GSAP, for ie8 its:

// ie8 (ie7 standards mode)
filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
// ie8 ( ie8 standards mode) 
filter: alpha(opacity=80);  

Also if you are dealing with a straight image tag, you could try wrapping the PNG image with a div, and animate the opacity of the parent, instead of the png itself.

 

But if you do this, and the image is a child, add the below styles to the image:

opacity: inherit;
filter: inherit;

this is due to IE's opacity inheritance issues..

 

or use a background-image on a div and animate the opacity of the div..

 

I would be very interested in helping find a solution for this, if like Carl said, you attach demo files to test with.. IE8 seems to be the most troublesome IE browser version

 

I hope this helps..

  • Like 2
Link to comment
Share on other sites

Interesting find - it does appear as though that extra AlphaImageLoader filter will indeed help avoid the funky IE8 artifacts around the edges of a PNG as long as you wrap the <img> in a <div> (or some other parent element) and then animate that (the parent). If you animate the PNG <img> directly, it is still plagued by the artifacts. Gotta love IE8. Yuck.

 

I have attached a preview of the upcoming 1.10.3 release - would you mind letting us know if that works well for you? You'll still need to apply that AlphaImageLoader filter yourself, as we wouldn't want to force that on everyone and bloat the CSSPlugin, but you should be able to run that code from the stackoverflow answer:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

GSAP_1.10.3_preview3.zip

  • Like 2
Link to comment
Share on other sites

Hi guys, thanks for all the feedback.

 

###

Here's a JSFiddle of - pretty much - exactly my usecase with the same image (png32).

http://jsfiddle.net/xhkAm/

 

###

This code:

.imagePNG {
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="your image url", sizingMethod="crop";
     zoom:1;
}

Breaks my site completely. Zoom: 1 alone doesn't help.

 

###

Also if you are dealing with a straight image tag, you could try wrapping the PNG image with a div, and animate the opacity of the parent, instead of the png itself.

 

Unfortunately i'm dealing with a background-image. That's also why i haven't tried the code from the linked stackoverflow-question:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

###

or use a background-image on a div and animate the opacity of the div..

 

This is what i'm doing. The screenshot in my first post is a background-image. Exact scenario in my Fiddle, linked above.

 

###

 

I couldn't try out the 1.10.3 preview3 of GSAP yet. Is it meant to fix / improve this issue entirely or just if an IMG-tag is used?

 

Thanks again for all the suggestions and help. Great forums.

Sumit

Link to comment
Share on other sites

I'm not seeing any PNG artifacts in IE8, like in your screenshot above using your example in jsfiddle, by animating the div with the image as a background-image.

Link to comment
Share on other sites

As far as I can tell, you're trying to do something that's simply impossible in IE8 due to the browser itself. I'm pretty sure there's nothing GSAP can do to work around that, but let me know if you can find a solution (even without GSAP). 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×