IE Edge 41 perspective and transform image clipping issue

[RolandSoos]

Hey guys!

 

I have encountered an issue in IE Edge version 41. I see strange image clipping during the animation. Do you have any suggestion? Is it a bug in Edge?

 

See the weird result on the attached image.

 

 

See the Pen GxNPgq by anon (@anon) on CodePen.

 

See the Pen GxNPgq by anon (@anon) on CodePen.

[PointC]

I see what you mean in Edge. I removed the perspective in the .outer div and it all seemed fine to me after that.

 

Happy tweening.

 

 

[RolandSoos]

Thanks, but this example is not a real world example. I need the perspective at that place.  (I know that there is no 3d transforms in the example what could use it.)

[PointC]

hmmm.... I'm not sure then. It's not related to GSAP, but it does seem something that's specific to Edge. @Jonathan is the all-knowing Oracle of CSS solutions. If he's around, maybe he'll jump into the thread with some good ideas.

[Jonathan]

Hello @RolandSoos

 

This looks like a browser bug in MS EDGE. Since MS EDGE uses webkit as its render engine then it is susceptible to the same type of rendering bugs.

 

So you need to use CSS transform perspective() function instead of CSS perspective property, then you are still using perspective

 

Add this CSS rule right below your .outer CSS rule. It only targets MS Edge

 

/* target only MS EDGE, and use transform perspective() instead of perspective */
@supports (-ms-ime-align:auto) {
    .outer {
        -webkit-perspective: none;
        perspective: none;
        -webkit-transform: perspective(1000px);
        transform: perspective(1000px);
    }
}

 

Tested in latest MS Edge 41 on latest Windows 10

 

See the Pen vRgEqm by jonathan (@jonathan) on CodePen.

 

Also you might want to add a slight rotation: 0.01 to help it animate more smooth on a new rendering layer.

 

Happy Tweening

 

Resources:

CSS perspective property: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

CSS perspective() transform function: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective
 

[RolandSoos]

Thank you! This fix solved the issue.  and I still hate IE

[Jonathan]

Yep.. I think everyone would have to agree that we love to hate IE and MS Edge  

[Carl]

Craig, was right. the all knowing Oracle of CSS made it look easy

 

[RolandSoos]

Here is the bug report for IE if you need it in the future: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16452345/