263996 2023-10-31 14:19:56 -0700 REGRESSION (iOS 17): Animation flicker with multiple accelerated animations and direction change 2024-03-06 22:26:58 -0800 1 1 1 Unclassified WebKit Animations Safari 17 Unspecified Unspecified RESOLVED FIXED InRadar P2 Normal --- 1 ldebeasi graouts darryl.noakes dino graouts graouts karlcow webkit-bug-importer oldest_to_newest 1988974 0 468433 ldebeasi 2023-10-31 14:19:56 -0700 Created attachment 468433 Code reproduction Starting in iOS 17.0 having multiple accelerated animations on the same element causes a flicker when changing the direction. Steps to reproduce: 1. Open attached reproduction on a device running iOS 17.0+. 2. Tap "Run Animation". Observe that the square translates from the bottom of the screen to the top. 3. Drag the red square. The square should move with your pointer. 4. Release your pointer. Observe that the square jumps to the top of the screen before returning to its previous position and translating to the top of the screen. Expected Behavior: I expect the square to remain in its last position before translating to the top of the screen when I remove my pointer. Actual Behavior: The square jumps to the top of the screen, then returns to its last position before translating to the top of the screen when I remove my pointer. Other Info: - I am able to reproduce this starting on iOS 17.0 - I can reproduce this on Safari 17 on macOS 1989257 1 webkit-bug-importer 2023-11-01 14:21:29 -0700 <rdar://problem/117815004> 1989259 2 ap 2023-11-01 14:26:28 -0700 FWIW, I'm observing many inconsistent behaviors on this test case, and it doesn't work in Chrome at all, ao this is a little confusing. - sometimes it starts animating from bottom to top repeatedly - sometimes is also flickers when doing that - it follows mouse pointer even without clicking, but only to half of the screen But I don't think that I can see the reported actual behavior with macOS 14.2 beta. 1989267 3 468449 ldebeasi 2023-11-01 15:00:20 -0700 Created attachment 468449 Simplified test case Here's a simplified test case so you can compare the behavior across browsers. Steps to reproduce: 1. Open test case on Safari 17 for iOS or macOS. 2. Click "Run Animation". Observe that the square translates from the bottom of the screen to the top. 3. After 500ms, observe that the square jumps half way down the screen. 4. After another 500ms, observe that the square briefly flickers at the top of the screen before animating up from the middle of the screen. I expect the square to not briefly flicker at the top of the screen in step 4. 1989498 4 graouts 2023-11-02 13:13:34 -0700 On Sonoma, this used to work as of 262485@main but fails as of 266113@main (ToT as of this writing). 1989641 5 graouts 2023-11-03 02:49:42 -0700 I think I must have been confused, I'm now seeing the same behavior on Sonoma and Ventura. I did some digging and the behavior of the "simplified test case" changed in this way: - prior to 262875@main things looked as expected - 262875@main regressed the animation such that there would not be an animation for the second part - 265909@main fixed that regression but the flicker issue appears 2005893 6 graouts 2024-01-18 10:29:25 -0800 As it stands with a ToT build (273181@main) the flashing happens most of the time but not always. Will be looking at this next. 2019022 7 graouts 2024-03-06 01:47:15 -0800 This does not happen with threaded animation resolution enabled. 2019070 8 graouts 2024-03-06 08:52:57 -0800 I have a fix for this but writing a test might be tricky due to the very time-sensitive nature of this bug which only appears for a single frame. 2019095 9 graouts 2024-03-06 10:01:44 -0800 Pull request: https://github.com/WebKit/WebKit/pull/25540 2019275 10 ews-feeder 2024-03-06 22:26:56 -0800 Committed 275773@main (9d57f1f6519a): <https://commits.webkit.org/275773@main> Reviewed commits have been landed. Closing PR #25540 and removing active labels. 468433 2023-10-31 14:19:56 -0700 2023-11-01 15:00:20 -0700 Code reproduction index.html text/html 2004 ldebeasi PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5Ib21l PC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmll d3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xIiAvPgog ICAgPHN0eWxlPgogICAgICAuc3F1YXJlIHsKICAgICAgICB3aWR0aDogMTAwcHg7CiAgICAgICAg aGVpZ2h0OiAxMDBweDsKICAgICAgCiAgICAgICAgYmFja2dyb3VuZDogcmVkOwogICAgICB9CiAg ICAgIAogICAgICBib2R5IHsKICAgICAgICBvdmVyZmxvdzogaGlkZGVuOwogICAgICB9CiAgICA8 L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4gICAgCiAgICA8YnV0dG9uIG9uY2xpY2s9InJ1bkFu aW1hdGlvbigpIj5SdW4gQW5pbWF0aW9uPC9idXR0b24+CiAgICA8ZGl2IGNsYXNzPSJzcXVhcmUi PjwvZGl2PgogICAgPHNjcmlwdD4KICAgICAgY29uc3Qgc3F1YXJlID0gZG9jdW1lbnQucXVlcnlT ZWxlY3RvcignLnNxdWFyZScpOwogICAgICBjb25zdCBEVVJBVElPTiA9IDEwMDA7CiAgIAogICAg ICBjb25zdCBydW5BbmltYXRpb24gPSAoKSA9PiB7CiAgICAgICAgY29uc3QgYW5pID0gc3F1YXJl LmFuaW1hdGUoWwogICAgICAgICAgeyBvZmZzZXQ6IDAsIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVko MTAwdmgpJyB9LAogICAgICAgICAgeyBvZmZzZXQ6IDEsIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVko MHZoKScgfQogICAgICAgIF0sIHsKICAgICAgICAgIGZpbGw6ICdib3RoJywKICAgICAgICAgIGR1 cmF0aW9uOiBEVVJBVElPTgogICAgICAgIH0pOwogICAgICAgCiAgICAgICAgY29uc3QgYW5pMiA9 IHNxdWFyZS5hbmltYXRlKFsKICAgICAgICAgIHsgb2Zmc2V0OiAwLCB0cmFuc2Zvcm06ICd0cmFu c2xhdGVZKDB2aCknIH0sCiAgICAgICAgICB7IG9mZnNldDogMSwgdHJhbnNmb3JtOiAndHJhbnNs YXRlWSgxMDB2aCknIH0KICAgICAgICBdLCB7CiAgICAgICAgICBmaWxsOiAnYm90aCcsCiAgICAg ICAgICBkdXJhdGlvbjogRFVSQVRJT04KICAgICAgICB9KTsKICAgICAgIAogICAgICAgIGFuaTIu cGF1c2UoKTsKICAgICAgCiAgICAgICAgYW5pLm9uZmluaXNoID0gKCkgPT4gewogICAgICAgICAg bGV0IGxhc3QgPSB1bmRlZmluZWQ7CiAgICAgICAgICBsZXQgZGVsdGEgPSAwOwogICAgICAgICAg c3F1YXJlLmFkZEV2ZW50TGlzdGVuZXIoJ3BvaW50ZXJtb3ZlJywgKGV2KSA9PiB7CiAgICAgICAg ICAgIC8vIHRyYWNrIHRocm91Z2ggdGhlIGFuaW1hdGlvbiB3aXRoIHRoZSB1c2VyIGdlc3R1cmUK ICAgICAgICAgICAgaWYgKGxhc3QgIT09IHVuZGVmaW5lZCkgewogICAgICAgICAgICAgIGNvbnN0 IGRpZmYgPSBldi5jbGllbnRZIC0gbGFzdDsKICAgICAgICAgICAgICBkZWx0YSArPSBkaWZmOwog ICAgICAgICAgICB9CiAgICAgICAgICAgIGxhc3QgPSBldi5jbGllbnRZOwogICAgICAgICAgICBh bmkyLmN1cnJlbnRUaW1lID0gZGVsdGE7CiAgICAgICAgICB9KTsKICAgICAgCiAgICAgICAgICBz cXVhcmUuYWRkRXZlbnRMaXN0ZW5lcigncG9pbnRlcnVwJywgKGV2KSA9PiB7ICAgICAgICAgICAK ICAgICAgICAgICAgLy8gcmV2ZXJzZSB0aGUgYW5pbWF0aW9uIGFuZCBzZXQgdGhlIGN1cnJlbnQg c3VjaCB0aGF0CiAgICAgICAgICAgIC8vIHRoZSBlbGVtZW50IGlzIGluIHRoZSBzYW1lIHBsYWNl IGl0IHdhcyBpbiB0aGUgbm9ybWFsIGRpcmVjdGlvbgogICAgICAgICAgICBjb25zdCBjdXJyZW50 VGltZSA9IGFuaTIuY3VycmVudFRpbWU7CiAgICAgICAgICAgIGFuaTIuZWZmZWN0LnVwZGF0ZVRp bWluZyh7IGRpcmVjdGlvbjogJ3JldmVyc2UnIH0pOwogICAgICAgICAgICBhbmkyLmN1cnJlbnRU aW1lID0gRFVSQVRJT04gLSBjdXJyZW50VGltZTsgCiAgICAgICAgICAgIGFuaTIucGxheSgpOwog ICAgICAgICAgfSk7ICAgCiAgICAgICAgfQogICAgICB9CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+ CjwvaHRtbD4K 468449 2023-11-01 15:00:20 -0700 2023-11-01 15:00:20 -0700 Simplified test case index.html text/html 1534 ldebeasi PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5Ib21l PC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmll d3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xIiAvPgog ICAgPHN0eWxlPgogICAgICAuc3F1YXJlIHsKICAgICAgICB3aWR0aDogMTAwcHg7CiAgICAgICAg aGVpZ2h0OiAxMDBweDsKICAgICAgCiAgICAgICAgYmFja2dyb3VuZDogcmVkOwogICAgICB9CiAg ICAgIAogICAgICBib2R5IHsKICAgICAgICBvdmVyZmxvdzogaGlkZGVuOwogICAgICB9CiAgICA8 L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4gICAgCiAgICA8YnV0dG9uIG9uY2xpY2s9InJ1bkFu aW1hdGlvbigpIj5SdW4gQW5pbWF0aW9uPC9idXR0b24+CiAgICA8ZGl2IGNsYXNzPSJzcXVhcmUi PjwvZGl2PgogICAgPHNjcmlwdD4KICAgICAgY29uc3Qgc3F1YXJlID0gZG9jdW1lbnQucXVlcnlT ZWxlY3RvcignLnNxdWFyZScpOwogICAgICBjb25zdCBEVVJBVElPTiA9IDEwMDA7CiAgIAogICAg ICBjb25zdCBydW5BbmltYXRpb24gPSAoKSA9PiB7CiAgICAgICAgY29uc3QgYW5pID0gc3F1YXJl LmFuaW1hdGUoWwogICAgICAgICAgeyBvZmZzZXQ6IDAsIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVko MTAwdmgpJyB9LAogICAgICAgICAgeyBvZmZzZXQ6IDEsIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVko MHZoKScgfQogICAgICAgIF0sIHsKICAgICAgICAgIGZpbGw6ICdib3RoJywKICAgICAgICAgIGR1 cmF0aW9uOiBEVVJBVElPTgogICAgICAgIH0pOwogICAgICAgIGFuaS5vbmZpbmlzaCA9ICgpID0+ IHsKICAgICAgICAgIGNvbnN0IGFuaTIgPSBzcXVhcmUuYW5pbWF0ZShbCiAgICAgICAgICAgIHsg b2Zmc2V0OiAwLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKDB2aCknIH0sCiAgICAgICAgICAgIHsg b2Zmc2V0OiAxLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKDEwMHZoKScgfQogICAgICAgICAgXSwg ewogICAgICAgICAgICBmaWxsOiAnYm90aCcsCiAgICAgICAgICAgIGR1cmF0aW9uOiBEVVJBVElP TgogICAgICAgICAgfSk7CiAgICAgICAgICAKICAgICAgICAgIGFuaTIucGF1c2UoKTsKICAgICAg ICAgIAogICAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7CiAgICAgICAgICAgIGFuaTIuY3VycmVu dFRpbWUgPSA1MDA7CiAgICAgICAgICAgIHNldFRpbWVvdXQoKCkgPT4gewogICAgICAgICAgICAg IGNvbnN0IGN1cnJlbnRUaW1lID0gYW5pMi5jdXJyZW50VGltZTsKICAgICAgICAgICAgICBhbmky LmVmZmVjdC51cGRhdGVUaW1pbmcoeyBkaXJlY3Rpb246ICdyZXZlcnNlJyB9KTsKICAgICAgICAg ICAgICBhbmkyLmN1cnJlbnRUaW1lID0gRFVSQVRJT04gLSBjdXJyZW50VGltZTsgCiAgICAgICAg ICAgICAgYW5pMi5wbGF5KCk7CiAgICAgICAgICAgIH0sIDUwMCk7CiAgICAgICAgICB9LCA1MDAp OwogICAgICAgIH0KICAgICAgfQogICAgPC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==