Bug 250387
| Summary: | Using `rotate: x` and `transform: rotate(x)` yields different behavior with SVG | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Cory LaViska <cory> |
| Component: | Animations | Assignee: | Antoine Quint <graouts> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | ahmad.saleem792, dino, graouts, graouts, karlcow, sabouhallawa, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 16 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://github.com/web-platform-tests/wpt/pull/37933 | ||
| Bug Depends on: | |||
| Bug Blocks: | 250901 | ||
Cory LaViska
This was reported to me in Shoelace (https://github.com/shoelace-style/shoelace/issues/1121) after switching `transform: rotate(x)` to `rotate: x`. The spinner component suddenly started animating strangely, despite the values supposedly being equivalent. I've only been able to reproduce this in Safari.
I reduced the problem down to what seems like an issue with SVG elements, possibly limited to animating `stroke-dasharray`. The following CodePen example draws two SVGs. Both are identical, but the one on the left uses `rotate: x` and the one on the right uses `transform: rotate(x)`. The one on the left animates back and forth, whereas the one on the right animates the full circle.
https://codepen.io/claviska/pen/dyjvebY?editors=1100
I haven't been able to find other reports of this in the bug tracker. It happens in Safari 16 and TP (Release 160).
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Ahmad Saleem
I am able to reproduce this bug in Safari 16.2 and Safari Technology Preview 160 using CodePen from Comment 0, while Chrome Canary 111 & Firefox Nightly 110 match each other and does not exhibit same error as Safari.
Antoine Quint
This seems to be specific to animation, static use of `rotate` and `transform: rotate()` yield similar results.
Antoine Quint
We fail to create a CSSAnimation for the "rotate" case while we do for the "transform" case. We must maintain a list somewhere of properties that are eligible for animation on SVG elements.
Antoine Quint
Actually, this was user error :) The problem is that when we get to LegacyRenderSVGShape::layout(), m_needsTransformUpdate is false. We most likely need to make LegacyRenderSVGModelObject::styleDidChange() aware of individual transform properties.
Antoine Quint
Pull request: https://github.com/WebKit/WebKit/pull/8620
Antoine Quint
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/37933
EWS
Committed 258882@main (540afd688321): <https://commits.webkit.org/258882@main>
Reviewed commits have been landed. Closing PR #8620 and removing active labels.
Radar WebKit Bug Importer
<rdar://problem/104234342>