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
Linked from https://css-tricks.com/css-animation-timelines-building-a-rube-goldberg-machine/
These are animations on SVG elements.
Does not seem to be related to Web Animations, we get the same behavior using the legacy engine.
<rdar://problem/63127944>
Created attachment 399300 [details] reduced test case
Created attachment 399394 [details] 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".
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.
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.
We should file bugs on Firefox and Chrome.
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?
Closing based on Ahmad's testing on the "More reduced test case". Please open a new bug if there is an additional bug.