Bug 211755 – Bad animations with transform-box

• Component: Animations
• Status: RESOLVED CONFIGURATION CHANGED

[Simon Fraser (smfr)]

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

[Simon Fraser (smfr)]

Linked from https://css-tricks.com/css-animation-timelines-building-a-rube-goldberg-machine/

[Simon Fraser (smfr)]

These are animations on SVG elements.

[Antoine Quint]

Does not seem to be related to Web Animations, we get the same behavior using the legacy engine.

[Radar WebKit Bug Importer]

<rdar://problem/63127944>

[Said Abou-Hallawa]

Created attachment 399300 [details]
reduced test case

[Said Abou-Hallawa]

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".

[Simon Fraser (smfr)]

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.

[Said Abou-Hallawa]

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.

[Antoine Quint]

We should file bugs on Firefox and Chrome.

[Ahmad Saleem]

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?

[Brent Fulgham]

Closing based on Ahmad's testing on the "More reduced test case". Please open a new bug if there is an additional bug.