1564366 - CSS animation on :before element not unset

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, defect, P3)

Description

[Sjors Rijsdam]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

I have created a progress indicator with some text and an icon in a generated element (:before).

When it is set in the busy state it is given an extra CSS class and the innerHTML is replaced. The CSS class animates the :before element. Afterwards when it is in the done state the busy CSS class is replaced with a done CSS class and the innerHTML is replaced again.

Isolated example: https://codepen.io/anon/pen/BgGgOE

Side note: In the example, when commenting out the lines that set the innerHTML the bug goes away and the behaviour is as expected.

Actual results:

Even though the animation CSS was removed by setting the done class, the :before element kept animating.

Expected results:

The :before element should have stopped animating in the done state.
Chrome and Safari do show the desired behaviour.

Comment 1

[ovidiu boca[:Ovidiu]]

I tested this issue on Mac OS X 10.14 and Windows 10 x64 with FF release 68 and FF Nightly 70.0a1(2019-07-14) and I can reproduce the issue.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case from reporter.

Thanks for the extremely reduced testcase! It's always very appreciated :)

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: A bit more reduced.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

mozregression says: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=edb7e1ddd9b61e2af2a75cfe5baa0f92a54a2716&tochange=594cc32b632396a867ef1f98428968b224d82151

There are a fair amount of suspect changes there.

Comment 5

[Brian Birtles (:birtles)]

Yeah, nothing jumps out to me from that list as being particularly likely.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

I dug a bit and have a fix, though the nicer fix would be much harder.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1564366 - Update animations when a pseudo-element had animations but no longer has, and has been re-framed in the meantime. r=birtles,hiro

This is the easy fix.

The hard fix (outlined in the comment) would be nice, but I don't think this bug
alone justifies it.

Comment 8

[Brian Birtles (:birtles)]

Did you happen to identify the regressing bug?

Comment 9

[Emilio Cobos Álvarez (:emilio)]

No, I didn't do manual bisection.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/654ddf428c90
Update animations when a pseudo-element had animations but no longer has, and has been re-framed in the meantime. r=birtles

Comment 11

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

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

Comment 12

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

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 13

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/654ddf428c90

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Given how long this bug has been around, I'm thinking we can just let the fix ride the trains. Feel free to nominate for Beta approval if you feel strongly otherwise, however.

Comment 15

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

Upstream PR merged