211755 2020-05-11 17:17:49 -0700 Bad animations with transform-box 2024-01-22 16:25:23 -0800 1 1 1 Unclassified WebKit Animations Safari Technology Preview Unspecified Unspecified RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=211927 InRadar P2 Normal --- 1 simon.fraser webkit-unassigned ahmad.saleem792 bfulgham dino graouts graouts krit sabouhallawa simon.fraser webkit-bug-importer zimmermann oldest_to_newest 1651530 0 simon.fraser 2020-05-11 17:17:49 -0700 https://codepen.io/phebert/pen/oNXRPNK shows some issues like wrong animation origins on the swinging ball, and some weird flickers with the ball at the end 1651531 1 simon.fraser 2020-05-11 17:18:21 -0700 Linked from https://css-tricks.com/css-animation-timelines-building-a-rube-goldberg-machine/ 1651532 2 simon.fraser 2020-05-11 17:20:04 -0700 These are animations on SVG elements. 1651667 3 graouts 2020-05-12 02:22:05 -0700 Does not seem to be related to Web Animations, we get the same behavior using the legacy engine. 1651668 4 webkit-bug-importer 2020-05-12 02:22:33 -0700 <rdar://problem/63127944> 1652393 5 399300 sabouhallawa 2020-05-13 14:17:31 -0700 Created attachment 399300 reduced test case 1652762 6 399394 sabouhallawa 2020-05-14 12:59:58 -0700 Created attachment 399394 More reduced test case The bug happens because of this CSS setting: #ball { ... transform-box: unset; ... } If it is deleted, the animation works fine. It looks like the initial value of "transform-box" is set to "border-box". But according to https://drafts.csswg.org/css-transforms/#transform-box it should be "view-box". 1652810 7 simon.fraser 2020-05-14 15:07:12 -0700 It's possible that webkit behavior is correct and the other browsers are wrong; we did do some transform-box stuff not too long ago. 1652835 8 sabouhallawa 2020-05-14 15:40:25 -0700 I think "view-box" is more appropriate initial value for SVG elements. The SVG view box represents the coordinate system for the whole SVG. I think it is hard to think of the transform-origin in terms of the "element" coordinates. I logged https://bugs.webkit.org/show_bug.cgi?id=211927 to track the transform-box initial value issue. I will keep this bug for the flickering at the end of the animation. 1652972 9 graouts 2020-05-15 00:59:48 -0700 We should file bugs on Firefox and Chrome. 1956646 10 ahmad.saleem792 2023-05-19 18:15:22 -0700 I don't know about the past but using 'more reduced testcase', I think Safari 16.5, Chrome Canary 115 and Firefox Nightly 115 are same (at least I think). If nothing needed, can we close this now? 2006725 11 bfulgham 2024-01-22 16:25:23 -0800 Closing based on Ahmad's testing on the "More reduced test case". Please open a new bug if there is an additional bug. 399300 2020-05-13 14:17:31 -0700 2020-05-13 14:17:31 -0700 reduced test case test350.html text/html 995 sabouhallawa PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgICNCYWxsX2FuZF9TdHJpbmcgewogICAgICAgIHRy YW5zZm9ybTogcm90YXRlKDMzZGVnKTsKICAgICAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMXM7 CiAgICAgICAgdHJhbnNpdGlvbi1kZWxheTogMC41OwogICAgICAgIHRyYW5zaXRpb24tdGltaW5n LWZ1bmN0aW9uOiBjdWJpYy1iZXppZXIoMC4zNCwgMS41NiwgMC42NCwgMSk7CiAgICAgICAgLyog VGhpcyBpcyBicm9rZW4gaW4gd2Via2l0IHdpdGhvdXQgdGhlc2UgcnVsZXMgKi8KICAgICAgICB0 cmFuc2Zvcm0tYm94OiB1bnNldDsKICAgICAgICB0cmFuc2Zvcm0tb3JpZ2luOiAxMDAwcHggLTEw MHB4OwogICAgfQoKICAgIC5nYW1lLW9uICNCYWxsX2FuZF9TdHJpbmcgewogICAgICAgIHRyYW5z Zm9ybTogcm90YXRlKC0yMGRlZyk7CiAgICB9CgogICAgLmJhbGwgewogICAgICAgIGZpbGw6IGdy ZWVuOwogICAgfQoKICAgIC5zdHJpbmcgewogICAgICAgIHN0cm9rZTogYmx1ZTsKICAgICAgICBz dHJva2Utd2lkdGg6IDc7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgfQo8L3N0 eWxlPgo8Ym9keT4KICAgIDxzdmcgdmlld0JveD0iMCAwIDQwMDAgMTAwMCI+CiAgICAgIDxnIGlk PSJCYWxsX2FuZF9TdHJpbmciPgogICAgICAgIDxsaW5lIGNsYXNzPSJzdHJpbmciIHgxPSIxMDAw IiB5MT0iNDAwIiB4Mj0iMTAwMCIgeTI9Ii0xMDAiIC8+CiAgICAgICAgPGNpcmNsZSBjbGFzcz0i YmFsbCIgY3g9IjEwMDAiIGN5PSI0NTUiIHI9IjU1IiAvPgogICAgICA8L2c+CiAgICA8L3N2Zz4K ICAgIDxzY3JpcHQ+CiAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLCAoZXZl bnQpID0+IHsKICAgICAgICAgICAgY29uc3Qgc3ZnID0gZG9jdW1lbnQucXVlcnlTZWxlY3Rvcigi c3ZnIik7CiAgICAgICAgICAgIHN2Zy5jbGFzc0xpc3QuYWRkKCJnYW1lLW9uIik7CiAgICAgICAg fSk7CiAgICA8L3NjcmlwdD4KPC9ib2R5Pgo= 399394 2020-05-14 12:59:58 -0700 2020-05-14 12:59:58 -0700 More reduced test case test350.html text/html 835 sabouhallawa PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIHN2ZyB7CiAgICAgICAgd2lkdGg6IDgwMHB4Owog ICAgICAgIGhlaWdodDogNjAwcHg7CiAgICAgICAgYm9yZGVyOiAycHggc29saWQgYmxhY2s7CiAg ICB9CgogICAgLmF4aXMgewogICAgICAgIHN0cm9rZTogYmx1ZTsKICAgICAgICBzdHJva2Utd2lk dGg6IDI7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgfQoKICAgICNiYWxsIHsK ICAgICAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMXM7CiAgICAgICAgdHJhbnNmb3JtLWJveDog dW5zZXQ7CiAgICAgICAgdHJhbnNmb3JtLW9yaWdpbjogNDAwcHggMTAwcHg7CiAgICAgICAgZmls bDogZ3JlZW47CiAgICB9CgogICAgLmdhbWUtb24gI2JhbGwgewogICAgICAgIHRyYW5zZm9ybTog cm90YXRlKC05MGRlZyk7CiAgICB9Cjwvc3R5bGU+Cjxib2R5PgogICAgPHN2Zz4KICAgICAgICA8 bGluZSBjbGFzcz0iYXhpcyIgeDE9IjAiIHkxPSIxMDAiIHgyPSI4MDAiIHkyPSIxMDAiLz4KICAg ICAgICA8bGluZSBjbGFzcz0iYXhpcyIgeDE9IjQwMCIgeTE9IjAiIHgyPSI0MDAiIHkyPSI2MDAi Lz4KICAgICAgICA8Y2lyY2xlIGlkPSJiYWxsIiBjeD0iNDAwIiBjeT0iMzAwIiByPSIyMCIgLz4K ICAgIDwvc3ZnPgogICAgPHNjcmlwdD4KICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcign bG9hZCcsIChldmVudCkgPT4gewogICAgICAgICAgICBjb25zdCBzdmcgPSBkb2N1bWVudC5xdWVy eVNlbGVjdG9yKCJzdmciKTsKICAgICAgICAgICAgc3ZnLmNsYXNzTGlzdC5hZGQoImdhbWUtb24i KTsKICAgICAgICB9KTsKICAgIDwvc2NyaXB0Pgo8L2JvZHk+Cg==