250387 2023-01-10 07:37:06 -0800 Using `rotate: x` and `transform: rotate(x)` yields different behavior with SVG 2023-01-20 08:58:54 -0800 1 1 1 Unclassified WebKit Animations Safari 16 Unspecified Unspecified RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/37933 BrowserCompat, InRadar P2 Normal --- 250901 1 cory graouts ahmad.saleem792 dino graouts graouts karlcow sabouhallawa simon.fraser webkit-bug-importer oldest_to_newest 1924410 0 cory 2023-01-10 07:37:06 -0800 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). 1924794 1 ahmad.saleem792 2023-01-11 07:34:20 -0800 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. 1925285 2 graouts 2023-01-13 03:04:22 -0800 This seems to be specific to animation, static use of `rotate` and `transform: rotate()` yield similar results. 1925303 3 graouts 2023-01-13 04:20:11 -0800 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. 1925312 4 graouts 2023-01-13 04:40:30 -0800 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. 1925334 5 graouts 2023-01-13 07:11:12 -0800 Pull request: https://github.com/WebKit/WebKit/pull/8620 1925335 6 graouts 2023-01-13 07:12:37 -0800 Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/37933 1925412 7 ews-feeder 2023-01-13 11:58:13 -0800 Committed 258882@main (540afd688321): <https://commits.webkit.org/258882@main> Reviewed commits have been landed. Closing PR #8620 and removing active labels. 1925413 8 webkit-bug-importer 2023-01-13 11:59:20 -0800 <rdar://problem/104234342>