203081 2019-10-17 06:57:14 -0700 [Web Animations] Adding a transition interferes with Web Animation easing 2020-02-24 02:49:54 -0800 1 1 1 Unclassified WebKit Animations Safari Technology Preview Unspecified Unspecified RESOLVED DUPLICATE 207760 InRadar P2 Normal --- 1 ldebeasi webkit-unassigned dino graouts graouts webkit-bug-importer oldest_to_newest 1580945 0 ldebeasi 2019-10-17 06:57:14 -0700 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. 1581364 1 webkit-bug-importer 2019-10-18 02:54:18 -0700 <rdar://problem/56401884> 1581365 2 graouts 2019-10-18 02:55:18 -0700 Thanks for the bug report Liam. You are correct, the CSS transition should have no effect. 1615611 3 ldebeasi 2020-02-06 06:54:27 -0800 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. 1615619 4 389953 graouts 2020-02-06 07:20:26 -0800 Created attachment 389953 Testcase 1615620 5 graouts 2020-02-06 07:21:53 -0800 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. 1615650 6 graouts 2020-02-06 08:32:25 -0800 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. 1622097 7 graouts 2020-02-24 02:49:54 -0800 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 *** 389953 2020-02-06 07:20:26 -0800 2020-02-06 07:20:26 -0800 Testcase 203081.html text/html 692 graouts PGh0bWw+CiAgPGhlYWQ+CiAgICA8c3R5bGU+Cgouc3F1YXJlIHsKICBtYXJnaW46IDQwcHggMzBw eDsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBiYWNrZ3JvdW5kOiByZ2JhKDAs IDAsIDI1NSwgMC41KTsKfQoKLnRyYW5zIHsKICB0cmFuc2l0aW9uOiAycyBlYXNlLWluLW91dDsK fQogICAgCiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InNx dWFyZSI+PC9kaXY+CiAgICA8YnV0dG9uIG9uY2xpY2s9InRvZ2dsZSgpIj50b2dnbGUgdHJhbnNp dGlvbjwvYnV0dG9uPgogICAgPHNjcmlwdD4KCmNvbnN0IGtleWZyYW1lcyA9IFsKICB7IG9mZnNl dDogMCwgb3BhY2l0eTogMSwgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgwJSknIH0sCiAgeyBvZmZz ZXQ6IDEsIG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoMTAwJSknIH0KXTsKCmNv bnN0IHNxdWFyZSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5zcXVhcmUnKTsKCnNxdWFyZS5h bmltYXRlKGtleWZyYW1lcywgewogIGVhc2luZzogJ2xpbmVhcicsCiAgaXRlcmF0aW9uczogSW5m aW5pdHksCiAgZHVyYXRpb246IDIwMDAKfSk7Cgpjb25zdCB0b2dnbGUgPSAoKSA9PiB7CiAgc3F1 YXJlLmNsYXNzTGlzdC50b2dnbGUoJ3RyYW5zJyk7Cn0KCiAgICA8L3NjcmlwdD4KICA8L2JvZHk+ CjwvaHRtbD4=