WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED CONFIGURATION CHANGED
211755
Bad animations with transform-box
https://bugs.webkit.org/show_bug.cgi?id=211755
Summary
Bad animations with transform-box
Simon Fraser (smfr)
Reported
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
Attachments
reduced test case
(995 bytes, text/html)
2020-05-13 14:17 PDT
,
Said Abou-Hallawa
no flags
Details
More reduced test case
(835 bytes, text/html)
2020-05-14 12:59 PDT
,
Said Abou-Hallawa
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1
2020-05-11 17:18:21 PDT
Linked from
https://css-tricks.com/css-animation-timelines-building-a-rube-goldberg-machine/
Simon Fraser (smfr)
Comment 2
2020-05-11 17:20:04 PDT
These are animations on SVG elements.
Antoine Quint
Comment 3
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.
Radar WebKit Bug Importer
Comment 4
2020-05-12 02:22:33 PDT
<
rdar://problem/63127944
>
Said Abou-Hallawa
Comment 5
2020-05-13 14:17:31 PDT
Created
attachment 399300
[details]
reduced test case
Said Abou-Hallawa
Comment 6
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".
Simon Fraser (smfr)
Comment 7
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.
Said Abou-Hallawa
Comment 8
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.
Antoine Quint
Comment 9
2020-05-15 00:59:48 PDT
We should file bugs on Firefox and Chrome.
Ahmad Saleem
Comment 10
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?
Brent Fulgham
Comment 11
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.
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug