Perspective not applied in rare cases when other animation plays with GSAP
Reported by
rol...@nextendweb.com,
Sep 28 2017
|
||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36 Example URL: https://codepen.io/mm00/pen/jGmwXK Steps to reproduce the problem: 1. Open the codepen: https://codepen.io/mm00/pen/jGmwXK 2. The right image will jump perspective in the middle of the animation 3. Click on the body, to repeat the animation to see the issue again and again. What is the expected behavior? The right side image should rotate from -90deg to 0deg and should be rendered with the given perspective all the time. What went wrong? While the fade in animation is playing on the left side image, the perspective on the right side image is not applied. When the animation finishes on the left side image, the right side image starts to rendering correctly in the given perspective. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 61.0.3163.100 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: Tried it on: Mac Sierra Chrome 61 - not working Mac Sierra Safari - works as expected Window 7 Chrome 48, 50, 58, 59, 60, 62, 63 - not working Windows 7 Firefox 55.0.3: works as expected
,
Sep 29 2017
Able to reproduce this issue on Mac 10.12.6, Win-10 and Ubuntu 14.04 using chrome reported version 61.0.3163.100 and latest canary 63.0.3226.0. This is a non-regression issue as it is observed from M50 old builds. Hence, marking it as untriaged to get more inputs from dev team. Thanks...!!
,
Oct 2 2017
,
Oct 3 2017
,
Oct 3 2017
,
Oct 3 2017
,
Oct 3 2017
The jump during the animation can be avoided with
#layer1 {
will-change: opacity;
}
Using a port of the example from GSAP to Web Animations:
https://codepen.io/ericwilligers/pen/xXXdLE
I can sometimes observe the jump, but not consistently.
,
Oct 3 2017
I "fixed" your pen to constantly produce the bug: https://codepen.io/mm00/pen/yzzoJv
,
Oct 3 2017
#layer1 should be in 3d context and it seems like it has to be animated. When you apply in CSS diretly the #layer1{transform:matrix(1, 0, 0, 1, 0, 0);} the bug is not present.
Also will-change does not help to resolve this situation.
What I know that solves the issue is if I apply perspective to the parent of the animated elements: https://codepen.io/mm00/pen/eGGEvL
,
Oct 3
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Oct 5
Can still reproduce this with stable (69.0.3497.100).
,
Oct 5
I can reproduce it too on OSX Chrome 69.0.3497.100
,
Dec 11
|
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by ligim...@chromium.org
, Sep 28 2017