211986 2020-05-16 10:09:44 -0700 [web-animations] percentage transform values are incorrect if `width` and `height` are animated 2024-02-16 01:03:36 -0800 1 1 1 Unclassified WebKit Animations Safari 13 All All RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/43647 https://bugs.webkit.org/show_bug.cgi?id=269563 InRadar P2 Major --- 1 steveblue graouts ahmad.saleem792 dino giffypap79 graouts graouts jonlee simon.fraser webkit-bug-importer oldest_to_newest 1653329 0 steveblue 2020-05-16 10:09:44 -0700 When using this animation on https://stephenbelovarich.com, the transition appears correct for all browsers except Safari (MacOS and iOS). When animating the element with Web Animations API, the transition starts, then at the end appears stuck, snapping into place. It appears easing is not being applied correctly. Reproducible with any easing and fill. ``` { keyframes: [ { transform: 'translateX(0%) translateY(0%)', width: '44px', top: '0%', right: '0%' }, { transform: 'translateX(50%) translateY(-50%)', width: '320px', top: '50%', right: '50%' } ], options: { fill: 'forwards', easing: 'ease-in-out', duration: 700 } } ``` The element has this CSS: ``` nav { position: absolute; display: block; top: 0%; right: 0%; width: 44px; height: 44px; transform: translateX(0%) translateY(0%); text-align: center; ``` Steps to reproduce: Visit https://stephenbelovarich.com Click on hamburger menu Observe transition is incorrect in Safari, correct in Chrome and Firefox. I'm not sure if this is a duplicate of 210526. The issue seemed like it could be different. 1653367 1 webkit-bug-importer 2020-05-16 16:02:16 -0700 <rdar://problem/63309680> 1653533 2 graouts 2020-05-18 02:28:46 -0700 Seems to be a transform-origin issue, the text content grows as if the origin is the top-right corner instead of its center like it does in Firefox. 1653536 3 graouts 2020-05-18 02:44:08 -0700 I don't think this is related to easing at all, it's a transform problem as far as I can tell. Retitling to reflect this. This is also not a regression in the new Web Animations engine. 1653540 4 graouts 2020-05-18 02:53:31 -0700 There is also an opacity animation that is wrong during the animation for the nav content. 1653541 5 graouts 2020-05-18 02:54:45 -0700 Stephen, it would help if you could provide somewhat reduced content for this example. Could you make a simpler test that is just the menu animation, removing any additional content, and possibly not using shadow roots or anything more than just the necessary HTML, CSS and JS? 1653816 6 steveblue 2020-05-18 17:03:51 -0700 Here you go. I have nowhere to host trimmed down example except Codepen. I removed the CSS animation keyframes so you can focus on just the Web Animations API animation. https://codepen.io/steveblue/pen/zYvMLpp The opacity issue you described has been fixed since you reviewed on stephenbelovarich.com, good catch, I found that too! I tried adding `transform-origin: 50% 50%` but that didn't help. To be clear, I am animating the top and right while also animating the transform which should provide a centered effect without transform-origin. 1653823 7 steveblue 2020-05-18 17:14:20 -0700 I believe this issue probably has more to do with animating transform with top and right simultaneously. 1653960 8 graouts 2020-05-19 02:56:38 -0700 Thanks Stephen, this is great and will help a lot. For future reference, you can attach an HTML file to bugs here. 1653966 9 399728 graouts 2020-05-19 03:58:39 -0700 Created attachment 399728 Reduction 1654079 10 simon.fraser 2020-05-19 11:15:33 -0700 That testcase matches Firefox with a recent WebKit build. 1654124 11 simon.fraser 2020-05-19 12:17:11 -0700 Ah, there's a snap at the end. 1654172 12 steveblue 2020-05-19 13:56:46 -0700 Yes, the issue is most prominent at the end of the animation in, clicking on the button reveals the second animation also makes the element go off screen in Safari and not in Chrome and Firefox. 1654342 13 399816 steveblue 2020-05-19 23:15:30 -0700 Created attachment 399816 simplified test case This is a simplified reproduction of the issue. index.html includes styling, Web Animations API example, and html. 1837786 14 steveblue 2022-02-05 13:18:10 -0800 I observed this is still an issue in Safari Technology Preview 139, which contains a bunch of bug fixes for Web Animations. 1919372 15 ahmad.saleem792 2022-12-14 16:50:27 -0800 I am still able to reproduce the jumpy box at the end of animation using "simplified test case" in Safari Technology Preview 160. 1919387 16 steveblue 2022-12-14 17:04:52 -0800 Ahmad, I just opened the simplified test case and still observe the issue in Safari Technology Preview 160. Observe the square translates smoothly, then snaps at the end in place. This "snap" is not intended. Observe the same transition in another browser like Chrome or Firefox, the translation is smooth on the x and y axis, there is no snap, unlike in Safari Technology Preview. The issue is perhaps more pronounced here https://stephenbelovarich.com. Click the menu in the top right to observe the same issue. The menu with the two lines smoothly transitions in other browsers, while the menu translates too far to the left in Safari Technology Preview 160 and then snaps into place, which is not as intended. 1919391 17 steveblue 2022-12-14 17:08:22 -0800 Yeah, I am able to reproduce in Safari Technology Preview 160 as well. Thanks for reporting Ahmad! 1999212 18 469013 graouts 2023-12-13 00:42:15 -0800 Created attachment 469013 Further reduction I don't know if this covers all of the issues in the original report, but I have a further-reduced sample which indicates that we resolve `transform` values independently of the animated `width` and `height` values: div { width: 10px; height: 10px; background-color: black; animation: anim 1s linear forwards; } @keyframes anim { to { width: 200px; height: 200px; transform: translate(50%, 50%); } } We snap at the end when we resolve `translate(50%, 50%)` to account for the new `width` and `height` values. 1999213 19 graouts 2023-12-13 00:44:05 -0800 If the animation runs without acceleration (using a `steps()` timing function for instance) then we can clearly see that we have the expected behavior. 1999214 20 graouts 2023-12-13 00:45:14 -0800 I think we may have to opt out of acceleration in this case. We don't actually gain much anyway since we'll have perform a new layout on each frame due to the `width` and `height` changes. 1999215 21 graouts 2023-12-13 00:46:48 -0800 Retitling the bug to be about the remaining issue since there have been progressions since this bug was originally reported. 1999253 22 graouts 2023-12-13 07:37:13 -0800 Pull request: https://github.com/WebKit/WebKit/pull/21732 1999259 23 graouts 2023-12-13 07:47:47 -0800 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/43647 1999502 24 ews-feeder 2023-12-14 00:58:58 -0800 Committed 272022@main (6ab17cf692e2): <https://commits.webkit.org/272022@main> Reviewed commits have been landed. Closing PR #21732 and removing active labels. 399728 2020-05-19 03:58:39 -0700 2020-05-19 03:58:39 -0700 Reduction 211986-reduced.html text/html 556 graouts PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KPHRpdGxlPkJ1ZyAyMTE5ODY8L3RpdGxlPgo8 c3R5bGU+CgpkaXYgewogICAgcG9zaXRpb246IGFic29sdXRlOwogICAgYmFja2dyb3VuZDogYmxh Y2s7CiAgICBoZWlnaHQ6IDMyMHB4Owp9Cgo8L3N0eWxlPgoKPC9oZWFkPgoKPGJvZHk+CjxkaXY+ PC9kaXY+CjxzY3JpcHQ+Cgpkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCJkaXYiKS5hbmltYXRlKFsK ICB7CiAgICB0cmFuc2Zvcm06ICJ0cmFuc2xhdGVYKDAlKSB0cmFuc2xhdGVZKDAlKSIsCiAgICB3 aWR0aDogIjQ0cHgiLAogICAgdG9wOiAiMCUiLAogICAgcmlnaHQ6ICIwJSIsCiAgICBvcGFjaXR5 OiAiMCIgfSwKICB7CiAgICB0cmFuc2Zvcm06ICJ0cmFuc2xhdGVYKDUwJSkgdHJhbnNsYXRlWSgt NTAlKSIsCiAgICB3aWR0aDogIjMyMHB4IiwKICAgIHRvcDogIjUwJSIsCiAgICByaWdodDogIjUw JSIsCiAgICBvcGFjaXR5OiAiMSIgfQpdLCB7CiAgICBmaWxsOiAiZm9yd2FyZHMiLAogICAgZHVy YXRpb246IDEwMDAKfSk7Cgo8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg== 399816 2020-05-19 23:15:30 -0700 2020-05-19 23:15:30 -0700 simplified test case index.html text/html 2517 steveblue PCFET0NUWVBFIGh0bWw+CjxoZWFkPgogIDxzdHlsZT4KOnJvb3QgewoJLS1jLWJsYWNrOiAjMDAw MDAwOwp9CgouYW5pbWF0ZWQgewoJcG9zaXRpb246IGZpeGVkOwoJZGlzcGxheTogYmxvY2s7Cgl0 b3A6IDBweDsKCXJpZ2h0OiAwcHg7Cgl3aWR0aDogNDRweDsKCWhlaWdodDogNDRweDsKCXBhZGRp bmc6IDEycHg7Cgl6LWluZGV4OiAxMDAwOwogIGJhY2tncm91bmQ6IHZhcigtLWMtYmxhY2spOwp9 CgogIDwvc3R5bGU+CiAgPHNjcmlwdD4KY2xhc3MgQW5pbWF0aW9uUGxheWVyIHsKICBjb25zdHJ1 Y3RvcihlbGVtLCBhbmltYXRpb24pIHsKICAgIHRoaXMuZWxlbSA9IGVsZW07CiAgICB0aGlzLmFu aW1hdGlvbiA9IGFuaW1hdGlvbjsKICAgIHRoaXMucGxheWVyID0gdGhpcy5lbGVtLmFuaW1hdGUo CiAgICAgICAgYW5pbWF0aW9uLmtleWZyYW1lcywKICAgICAgICBhbmltYXRpb24ub3B0aW9ucyA/ IGFuaW1hdGlvbi5vcHRpb25zIDoge30KICAgICAgKQogIH0KICBjYW5jZWwoKSB7CiAgICB0aGlz LnBsYXllci5jYW5jZWwoKTsKICB9CiAgcGxheSgpIHsKICAgIHRoaXMucGxheWVyLnBsYXkoKTsK ICB9CiAgcGF1c2UoKSB7CiAgICB0aGlzLnBsYXllci5wYXVzZSgpOwogIH0KICBmaW5pc2goKSB7 CiAgICB0aGlzLnBsYXllci5maW5pc2goKTsKICB9CiAgcmV2ZXJzZSgpIHsKICAgIHRoaXMucGxh eWVyLnJldmVyc2UoKTsKICB9Cn0KCmZ1bmN0aW9uIGFuaW1hdGUoCiAgZWxlbSwKICBhbmltYXRp b24KKSB7CiAgcmV0dXJuIG5ldyBBbmltYXRpb25QbGF5ZXIoZWxlbSwgYW5pbWF0aW9uKTsKfQoK Y29uc3QgbmF2SW5BbmltYXRpb24gPSB7CiAga2V5ZnJhbWVzOiBbCiAgICB7CiAgICAgIHRyYW5z Zm9ybTogJ3RyYW5zbGF0ZVgoMCUpIHRyYW5zbGF0ZVkoMCUpJywKICAgICAgd2lkdGg6ICc0NHB4 JywKICAgICAgaGVpZ2h0OiAnNDRweCcsCiAgICAgIHRvcDogJzAlJywKICAgICAgcmlnaHQ6ICcw JScsCiAgICAgIG9wYWNpdHk6ICcxJwogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiAndHJh bnNsYXRlWCg1MCUpIHRyYW5zbGF0ZVkoLTUwJSknLAogICAgICB3aWR0aDogJzMyMHB4JywKICAg ICAgaGVpZ2h0OiAnMzIwcHgnLAogICAgICB0b3A6ICc1MCUnLAogICAgICByaWdodDogJzUwJScs CiAgICAgIG9wYWNpdHk6ICcxJwogICAgfQogIF0sCiAgb3B0aW9uczogewogICAgZmlsbDogJ2Zv cndhcmRzJywKICAgIGVhc2luZzogJ2Vhc2UtaW4nLAogICAgZHVyYXRpb246IDEwMDAKICB9Cn07 Cgpjb25zdCBuYXZPdXRBbmltYXRpb24gPSB7CiAga2V5ZnJhbWVzOiBbCiAgICB7CiAgICAgIHRy YW5zZm9ybTogJ3RyYW5zbGF0ZVgoNTAlKSB0cmFuc2xhdGVZKC01MCUpJywKICAgICAgd2lkdGg6 ICczMjBweCcsCiAgICAgIGhlaWdodDogJzMyMHB4JywKICAgICAgdG9wOiAnNTAlJywKICAgICAg cmlnaHQ6ICc1MCUnCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDAl KSB0cmFuc2xhdGVZKDAlKScsCiAgICAgIHdpZHRoOiAnNDRweCcsCiAgICAgIGhlaWdodDogJzQ0 cHgnLAogICAgICB0b3A6ICcwJScsCiAgICAgIHJpZ2h0OiAnMCUnCiAgICB9LAogICAgewogICAg ICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDAlKSB0cmFuc2xhdGVZKDAlKScsCiAgICAgIHdpZHRo OiAnNDRweCcsCiAgICAgIGhlaWdodDogJzQ0cHgnLAogICAgICB0b3A6ICcwJScsCiAgICAgIHJp Z2h0OiAnMCUnCiAgICB9LAogIF0sCiAgb3B0aW9uczogewogICAgZmlsbDogJ2ZvcndhcmRzJywK ICAgIGVhc2luZzogJ2Vhc2UtaW4nLAogICAgZHVyYXRpb246IDEwMDAKICB9Cn07CgpjbGFzcyBO YXZDb21wb25lbnQgewogIGNvbnN0cnVjdG9yKGVsZW0pIHsKICAgIHRoaXMuZWxlbSA9IGVsZW07 CiAgICB0aGlzLmlzQWN0aXZlID0gZmFsc2U7CiAgICB0aGlzLmFuaW1hdGlvbnMgPSB7CiAgICAg IG5hdkluOiBuYXZJbkFuaW1hdGlvbiwKICAgICAgbmF2T3V0OiBuYXZPdXRBbmltYXRpb24KICAg IH07CiAgfQogIHRvZ2dsZSgpIHsKICAgIHRoaXMuaXNBY3RpdmUgPSB0aGlzLmlzQWN0aXZlID8g ZmFsc2UgOiB0cnVlOwogICAgdGhpcy5uYXZJbiA9IGFuaW1hdGUodGhpcy5lbGVtLCB0aGlzLmFu aW1hdGlvbnMubmF2SW4pOwogICAgdGhpcy5uYXZPdXQgPSBhbmltYXRlKHRoaXMuZWxlbSwgdGhp cy5hbmltYXRpb25zLm5hdk91dCk7CiAgICBpZiAodGhpcy5pc0FjdGl2ZSkgewogICAgICB0aGlz Lm5hdk91dC5jYW5jZWwoKTsKICAgICAgdGhpcy5uYXZJbi5wbGF5KCk7CiAgICB9IGVsc2Ugewog ICAgICB0aGlzLm5hdkluLmNhbmNlbCgpOwogICAgICB0aGlzLm5hdk91dC5wbGF5KCk7CiAgICB9 CiAgfQp9CiAgPC9zY3JpcHQ+CjwvaGVhZD4KPGJvZHk+CiAgPGRpdiBjbGFzcz0iYW5pbWF0ZWQi PjwvZGl2Pgo8L2JvZHk+CjxzY3JpcHQ+CmNvbnN0IG5hdiA9IG5ldyBOYXZDb21wb25lbnQoZG9j dW1lbnQucXVlcnlTZWxlY3RvcignLmFuaW1hdGVkJykpOwpuYXYudG9nZ2xlKCk7Cjwvc2NyaXB0 Pgo8L2h0bWw+ 469013 2023-12-13 00:42:15 -0800 2023-12-13 00:42:15 -0800 Further reduction bug-211986-reduction.html text/html 321 graouts PCFET0NUWVBFIGh0bWw+CjxoZWFkPgogIDxzdHlsZT4KCmRpdiB7CiAgICB3aWR0aDogMTBweDsK ICAgIGhlaWdodDogMTBweDsKICAgIGJhY2tncm91bmQtY29sb3I6IGJsYWNrOwogICAgYW5pbWF0 aW9uOiBhbmltIDFzIGxpbmVhciBmb3J3YXJkczsKfQoKQGtleWZyYW1lcyBhbmltIHsKICAgIHRv IHsKICAgICAgICB3aWR0aDogMjAwcHg7CiAgICAgICAgaGVpZ2h0OiAyMDBweDsKICAgICAgICB0 cmFuc2Zvcm06IHRyYW5zbGF0ZSg1MCUsIDUwJSk7CiAgICB9Cn0KCiAgPC9zdHlsZT4KPC9oZWFk Pgo8Ym9keT4KPGRpdj48L2Rpdj4KPC9ib2R5Pgo8L2h0bWw+