Bug 203081 – [Web Animations] Adding a transition interferes with Web Animation easing

• Component: Animations
• Status: RESOLVED DUPLICATE

[Liam DeBeasi]

Link to reproduction: https://codepen.io/liamdebeasi/pen/PooGPMM

Steps to reproduce:

1. Open the CodePen link. You should see a blue square translating on the X axis and fading out to 0 in an endless loop.
2. Click the "toggle transition" button. This will add "transition: 0.2s ease-in-out;" to the square.
3. Notice that the animation is no longer smooth and is janky.

This behavior does not happen in Chrome/Firefox. I would expect that Web Animations would override whatever applicable CSS I have applied inline to the element.

[Radar WebKit Bug Importer]

<rdar://problem/56401884>

[Antoine Quint]

Thanks for the bug report Liam. You are correct, the CSS transition should have no effect.

[Liam DeBeasi]

Testing this again on Safari Tech Preview 100. The issue looks better, but small animation glitches still remain. Here are updated steps to reproduce:

1. Open the CodePen link. You should see a blue square translating on the X axis and fading out to 0 in an endless loop.
2. Click the "toggle transition" button. This will add "transition: 0.2s ease-in-out;" to the square.
3. Notice that the animation is janky for a few frames and then continues on smoothly as it did before. It looks like the animation jumps back to the beginning for a brief period and then resumes where it was before.

[Antoine Quint]

Created attachment 389953 [details]
Testcase

[Antoine Quint]

The issue here is that we're generating transitions when we shouldn't be:

    1. CSSTransition for transform going from matrix(1, 0, 0, 1, 0, 0) to none running for 2000ms on <div class="square trans">
    2. CSSTransition for opacity going from 0.001500000013038516 to 1 running for 2000ms on <div class="square trans">

We're picking up the opacity and transform values animated by the Web Animations, and we should ignore those altogether.

[Antoine Quint]

Actually, there are two issues, the first issue is generating transitions when we ought not to. The second is that the (mistakenly) generated transitions should be overridden completely by the looping Web Animation and thus have no effect.

[Antoine Quint]

This no longer reproduces on ToT, this was fixed by r256627. Marking as dupe of bug 207760.

*** This bug has been marked as a duplicate of bug 207760 ***