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