RESOLVED FIXED250387
Using `rotate: x` and `transform: rotate(x)` yields different behavior with SVG 
https://bugs.webkit.org/show_bug.cgi?id=250387
Summary Using `rotate: x` and `transform: rotate(x)` yields different behavior with SVG
Cory LaViska
Reported 2023-01-10 07:37:06 PST
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
Comment 1 2023-01-11 07:34:20 PST
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
Comment 2 2023-01-13 03:04:22 PST
This seems to be specific to animation, static use of `rotate` and `transform: rotate()` yield similar results.
Antoine Quint
Comment 3 2023-01-13 04:20:11 PST
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
Comment 4 2023-01-13 04:40:30 PST
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
Comment 5 2023-01-13 07:11:12 PST
Pull request: https://github.com/WebKit/WebKit/pull/8620
Antoine Quint
Comment 6 2023-01-13 07:12:37 PST
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/37933
EWS
Comment 7 2023-01-13 11:58:13 PST
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
Comment 8 2023-01-13 11:59:20 PST
<rdar://problem/104234342>
Note You need to log in before you can comment on or make changes to this bug.