238067 2022-03-17 23:53:21 -0700 REGRESSION (iOS 15.4 / r285529): Flicker on CSS transition of opacity and transform 2022-03-18 12:11:04 -0700 1 1 1 Unclassified WebKit Animations Safari 15 Unspecified Unspecified RESOLVED DUPLICATE 237972 https://bugs.webkit.org/show_bug.cgi?id=231358 https://bugs.webkit.org/show_bug.cgi?id=237918 InRadar P2 Normal --- 1 em_te webkit-unassigned dino graouts graouts kbr webkit-bug-importer oldest_to_newest 1852623 0 455068 em_te 2022-03-17 23:53:21 -0700 Created attachment 455068 test case showing flicker Doing a simple CSS transition shows a flicker on the latest Safari after the iOS 15.4 update. See test case attached. The transition is just: #box { transform: scale(0.3); opacity: 0.3; transition: transform 0.5s, opacity 1.5s; } #box:hover { opacity: 1; transform: scale(1); } Normally the transitions are smooth but now the transitions seem to repeat themselves causing a mismatched flicker. 1852644 1 webkit-bug-importer 2022-03-18 01:09:07 -0700 <rdar://problem/90476139> 1852696 2 graouts 2022-03-18 06:26:07 -0700 This regressed with r285529, the fix for bug 231358. 1852715 3 graouts 2022-03-18 07:48:24 -0700 r285529 did something very stupid in addLeafAnimation(): we would add the animationGroupBeginTime each time this function was called which meant that any time we committed animation on a layer. This was fine as long as there was only one commit per animation. But this also meant that if you had two or more animations running with different durations, such as in the test case, further commits would add an extra 1s to the leaf animation begin time. 1852730 4 graouts 2022-03-18 08:46:39 -0700 Going to fix this in bug 237972 since it was filed earlier and is the same issue. Thanks a lot for filing this bug with a reduction, this really helped! *** This bug has been marked as a duplicate of bug 237972 *** 455068 2022-03-17 23:53:21 -0700 2022-03-17 23:53:21 -0700 test case showing flicker hover.html text/html 532 em_te PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBj b250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIHVzZXItc2NhbGFibGU9bm8iIC8+CiAgPHN0eWxl PgogICNib3ggewogICAgd2lkdGg6IDMwMHB4OwogICAgaGVpZ2h0OiAzMDBweDsKICAgIGJhY2tn cm91bmQtY29sb3I6IGdyYXk7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuMyk7CiAgICBvcGFjaXR5 OiAwLjM7CiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC41cywgb3BhY2l0eSAxLjVzOwogIH0K ICBpbnB1dDpjaGVja2VkIH4gI2JveCB7CiAgICBvcGFjaXR5OiAxOwogICAgdHJhbnNmb3JtOiBz Y2FsZSgxKTsKICB9CiAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aW5wdXQgaWQ9 InRvZ2dsZSIgdHlwZT0iY2hlY2tib3giPjxsYWJlbCBmb3I9InRvZ2dsZSI+dG9nZ2xlIGNzcyAo c2NhbGUgMC41cywgb3BhY2l0eSAxLjVzKTwvbGFiZWw+CiAgICA8ZGl2IGlkPSJib3giPjwvZGl2 PgogIDwvYm9keT4KPC9odG1sPg==