[Webkit-unassigned] [Bug 250387] New: Using `rotate: x` and `transform: rotate(x)` yields different behavior with SVG
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Tue Jan 10 07:37:06 PST 2023
https://bugs.webkit.org/show_bug.cgi?id=250387
Bug ID: 250387
Summary: Using `rotate: x` and `transform: rotate(x)` yields
different behavior with SVG
Product: WebKit
Version: Safari 16
Hardware: Unspecified
OS: Unspecified
Status: NEW
Severity: Normal
Priority: P2
Component: CSS
Assignee: webkit-unassigned at lists.webkit.org
Reporter: cory at abeautifulsite.net
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).
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230110/e36c7ffe/attachment.htm>
More information about the webkit-unassigned
mailing list