2019080 - commitStyles() does not work with parallel animations of different length

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, defect)

Description

[ondra zara]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:148.0) Gecko/20100101 Firefox/148.0

Steps to reproduce:

See the fiddle: https://jsfiddle.net/ondras/p36y0nzv/9/

Actual results:

When both animations are run in parallel, the "position/translate" end style is not persisted.
This only happens:

• when there are two animations running together,
• their duration is different

Expected results:

The square's both position and size should have been persisted after the animation ended.

Works as expected in Chrome.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Transitions and Animations' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Brian Birtles (:birtles)]

Attachment: Test for animating top/left

I made a variant of this test using top/left and it still reproduces so I believe:

• This is not specific to our handling of transform properties
• This is not related to compositor animations
• This doesn't appear to be related to implicit keyframes (I tried adding specific 0% values and the issue still reproduces)

So this appears to be a bug in the way we fetch the final value of a finished animation when there is another animation running on the same element.

:canalun, would you care to take a look?

Comment 3

[Kanaru Sato [:canalun]]

(replying to :birtles)
Thank you so much for taking a look and making a variant!
I work on it :)

Comment 4

[Kanaru Sato [:canalun]]

Attachment: Bug 2019080 - Add a test case for concurrent animations with different props. r=birtles

Comment 5

[Kanaru Sato [:canalun]]

Attachment: Bug 2019080 - Fix CommitStyles for concurrent animations with different props. r=birtles

In ComposeSortedEffects, the path to override transitions overridden by animations does not count finished animations. And that path is used when there is an EffectSet for the target, i.e. when animations or transitions are present on the element. As a result, endpoint-inclusive commitStyles can fail when another animation is running on a different property. This patch fixes that.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/f6b1f5cb735c
https://hg.mozilla.org/integration/autoland/rev/7426c8fca042
Add a test case for concurrent animations with different props. r=birtles
https://github.com/mozilla-firefox/firefox/commit/849508e51544
https://hg.mozilla.org/integration/autoland/rev/efe765297df7
Fix CommitStyles for concurrent animations with different props. r=birtles,hiro

Comment 7

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/7426c8fca042
https://hg.mozilla.org/mozilla-central/rev/efe765297df7

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/58340 for changes under testing/web-platform/tests

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot