autoAlpha issue with SVG in IE11

[marcusk]

Hi,

 

I've searched the forums and on google for this issue I'm having, but unable to find an answer.  Hoping someone can help.  

 

In my simple animation test, I have 2 orange squares that slightly overlap each other.  When the opacity goes from 1 to 0, both squares fade away nicely in Chrome.

However, in IE11, the opacity is not gradually disappearing.  The 2 squares just disappear in an instant.  I can make this work in IE11 if I target both of the square's classes, but then what happens is, the overlapping part of the square becomes apparent and just looks odd.  

 

My codepen example presents this issue clearly.  I know some users may not be able to run this in IE, so I've also created this in an html and javascript file zipped.

 

Any thought to why this is happening and how I can make the opacity work in IE like chrome?  

GS-TEST.zip

See the Pen eYOyQzP by marcusk7 (@marcusk7) on CodePen

[ZachSaucier]

Hey Marcus and welcome to the GreenSock forums.

 

Have you tried adding position: relative; to #intro? I'm on a Mac so I can't test myself but I would guess that it would help.

[marcusk]

Hi Zach,

 

That was it!  But do you know why the position would effect how the opacity works?

[ZachSaucier]

It is likely because of how position: absolute; elements are handled in IE11. By making the container element's position be relative, you're forcing the elements to be positioned in respect to that element (and it's easier for the browser to know what its opacity should be). Otherwise I think IE11 is getting confused what the opacity should be because technically those elements are being positioned in respect to the body.