CSS Animations override Web Animations
Reported by
anto...@graougraou.com,
Feb 20 2017
|
||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/604.1.5 (KHTML, like Gecko) Version/10.2 Safari/604.1.5 Steps to reproduce the problem: 1. Use a Canary build and turn the option to have "Experimental Web Platform features" on 2. Create a repeating animation using Element.animate() that targets a given element and a given CSS property 3. Create another repeating animation using a CSS Animation that targets the same given element and the same given CSS property. What is the expected behavior? The animations created using Element.animate() should win in this instance as per https://w3c.github.io/web-animations/#animation-classes and https://drafts.csswg.org/css-animations-2/#animation-composite-order. CSS Animations have a lower composite order than Web Animations. A Firefox Nightly correctly implements this behaviour. What went wrong? It seems the Chrome behaviour is that whatever animation is applied last to an element, regardless of its type, is the one that "wins" in case of conflict. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 58.0.3018.0 (Official Build) canary (64-bit) Channel: canary OS Version: OS X 10.12.4 Flash Version:
,
Feb 21 2017
,
Feb 28 2017
Thank you for providing more feedback. Adding requester "mikelawther@chromium.org" for another review and adding "Needs-Review" label for tracking. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Feb 28 2017
Thanks for the test case. I've modified it slightly to make it more obvious (red is bad, green is good) and put it up here: https://jsfiddle.net/4c4wLghw/6/ Firefox 51.0.1 : both animations turn green Chrome 58.0.3026.0 : one red animation, one green animation
,
Mar 1 2017
,
Mar 1 2017
I have a feeling this will bisect onto either the shipping of Web Animations or the unprefixing of CSS Animations. (:
,
Mar 1 2017
Able to reproduce the issue on Mac 10.12.2, Windows 7 & Linux 14.04 using chrome reported version# 58.0.3018.0,stable#56.0.2924.87 & Canary#58.0.3026.0 as per the given html file & JSfiddle. Observed one red & one green square boxes from M45(45.0.2454.85) to recent chrome builds . No square boxes displayed in the erlier builds of M45.Hence keeping this issue as 'Untriaged' . Please find the attached screencast for reference. Thank you!!
,
Mar 1 2017
,
Mar 1 2017
,
Mar 7 2018
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. If you change it back, also remove the "Hotlist-Recharge-Cold" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Mar 7 2018
Issue reproducible on latest Canary 67.0.3364.0 and firefox on Mac, but not on Safari. Cc animation folks for it looks like there's problem with implementing the specs. |
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by mikelawther@chromium.org
, Feb 20 2017