Jump to content
Search Community

Chrome rotationY lose perspective when other animation plays

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

Currently I do not have a codepen which shows the issue as it happens only in our application and I wasn't able to narrow it down.

 

I have created a video which illustrates the issue. There are 3 elements which animates. Blue bars on the bottom timeline shows their animation delay and duration.

 

Heading layer: It is above the rounded picture. Fades in after 1950ms and plays for 1500ms

Author picture: it is the left picture. Starts to fade in at start and plays for 1500ms.

Picture with baloons: it has rotationY which turns it from 90° to 0°.

 

What you should see: rotationY should have perspective all the time. This perspective works fine between the two other animation, but when any of them plays, the perspective not applied.  

 

I'm trying to create a Codepen to illustrate it on a live example. Maybe it is a Chrome bug, I'm not sure. If you have any suggestion, please share and I will try. Thanks!

 

 

 

 

Link to comment
Share on other sites

The difference between the two pen, is that the one which has the bug adds a dummy x animation to the left image.

Also if you remove the transform CSS from the #col-1 selector, both of the example works as expected. 

 

The following works fine: 

See the Pen OxmjgE by mm00 (@mm00) on CodePen

 

And this one produce the bug:

See the Pen jGmwXK by mm00 (@mm00) on CodePen

 
I have also opened a ticket at Chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=769644

 

  • Like 1
Link to comment
Share on other sites

Hello @RolandSoos

 

Whats happening is not a GSAP bug, but it is happening because you have the perspective on a great great many greats grand parent (#slide), instead of an immediate parent (#col-2-inner) of your transformed element.

 

As a rule of thumb the CSS perspective property should be on the immediate parent of the element being transformed. That is why Chrome was rendering funky, since perspective  property applies perspective to immediate children and is very buggy to apply perspective on nested children's children children.  #col-2-inner is the immediate parent of the element your animating with transforms, #layer2. Which is what you want to have the perspective on. Does that make sense?

 

So add this to your CSS to fix this issue.

 

#col-2-inner {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

 

You can see here how it works properly now.

 

See the Pen gGWoYx by jonathan (@jonathan) on CodePen

 

Resources:

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Thanks Jonathan!

 

So is it not possible to render an element in a bigger space (#slide) when the transformed element is not its direct child?

 

 

Also is it safe to have perspective on a grand-grand-...parent element and also on the parent element in the same branch?

 

For example I have perspective on the #slide, which gives the perspective to the #layer 3 and I also have perspective on the two col in which #layer1 and #layer2 rendered.

 

See the Pen PJmQwV by mm00 (@mm00) on CodePen

 
Does it make any difference if I apply the transform:perspective to #layer1 and #layer2 instead of the #col-1 and #col-2?

See the Pen oGWEeM by mm00 (@mm00) on CodePen

 

Link to comment
Share on other sites

You can do that just be careful because sometimes using both transformPerspective on and element and perspective on a parent in Chrome can cause some weird rendering. So if what you have is working than use that. Just keep an eye out on each new Chrome version that comes out and make sure it doesnt break. Since Chrome Developers have a habit of breaking the behavior of 3D transforms and 3D transforms supporting CSS properties. But since perspective is on the top most parent than it might not affect the rendering of transformPerspective on its grand child's.

 

If it ain't broke, don't fix it.. that is until Chrome Devs breaks it for you :)

 

Happy Tweening.

Link to comment
Share on other sites

Yes, that is the hardest part to track browser changes to see what broken... We are working on an editor where the user can edit their own animations, so I'm unable to prepare for every case like this one. I will see what happen if I add perspective to each part of the animated element and I'm hope it will work as expected. Thank you!

Link to comment
Share on other sites

You could opt to do it like this.. remove perspective from #slide css rule, which i did in this pen below. Add perspective to #col-1 and #col-2. And remove transformPerspective from #layer-1 and #layer-2 in your tweens for those elements. That way you keep it simple. ;)

 

For the 3rd card #layer-3, you can use transform: perspective() function instead with no perspective property. Since you have no parent div for it like your using for the first two cards.  And use transfromPerspective on the element being transformed #layer-3.

 

So do this, either way would work:

  • #col-1 and #col-2 have perspective property, and its children (#layer-1 and #layer-2) do not have any transform perspective() (transformPerspective)
  • #layer-3 uses transform: perspective() .. (transformPerspective) and its parent have no perspective property

If you do it like I have below in my codepen, then you shouldn't have to check each time chrome updates, since you would be following the spec using either perspective property or transform perspective() function. You will see the lines I commented out in the pen below.

 

See the Pen oGWdLz by jonathan (@jonathan) on CodePen

 

:)

  • Like 2
Link to comment
Share on other sites

Well perspective is tricky so I wouldn't say that it shouldnt break 2D transforms or opacity. But perspective is a CSS 3D supporting property, since it has to do with the intersection of the z plane. But Chrome is buggy and when certain CSS properties are added wrong to certain elements, or even missing .. then you can get weird rendering behavior. And you are dealing with WebKit Chrome which can get very hairy when a combination of CSS properties, or lack their of is applied to your markup. 

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...