Bug 211755

Summary: Bad animations with transform-box
Product: WebKit Reporter: Simon Fraser (smfr) <simon.fraser>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, bfulgham, dino, graouts, graouts, krit, sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=211927
Attachments:
Description Flags
reduced test case
none
More reduced test case none

Description Simon Fraser (smfr) 2020-05-11 17:17:49 PDT
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
Comment 2 Simon Fraser (smfr) 2020-05-11 17:20:04 PDT
These are animations on SVG elements.
Comment 3 Antoine Quint 2020-05-12 02:22:05 PDT
Does not seem to be related to Web Animations, we get the same behavior using the legacy engine.
Comment 4 Radar WebKit Bug Importer 2020-05-12 02:22:33 PDT
<rdar://problem/63127944>
Comment 5 Said Abou-Hallawa 2020-05-13 14:17:31 PDT
Created attachment 399300 [details]
reduced test case
Comment 6 Said Abou-Hallawa 2020-05-14 12:59:58 PDT
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".
Comment 7 Simon Fraser (smfr) 2020-05-14 15:07:12 PDT
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.
Comment 8 Said Abou-Hallawa 2020-05-14 15:40:25 PDT
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.
Comment 9 Antoine Quint 2020-05-15 00:59:48 PDT
We should file bugs on Firefox and Chrome.
Comment 10 Ahmad Saleem 2023-05-19 18:15:22 PDT
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?
Comment 11 Brent Fulgham 2024-01-22 16:25:23 PST
Closing based on Ahmad's testing on the "More reduced test case". Please open a new bug if there is an additional bug.