Jump to content
Search Community

IE Edge 41 perspective and transform image clipping issue

RolandSoos test
Moderator Tag

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

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
 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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.
×
×
  • Create New...