183237 2018-02-28 18:10:54 -0800 Nested CSS transforms on SVG elements not updated after page load 2020-12-22 08:02:28 -0800 1 1 1 Unclassified WebKit SVG Safari 11 Unspecified Unspecified NEW InRadar P2 Normal --- 1 redblobgames webkit-unassigned duvrai sabouhallawa simon.fraser webkit-bug-importer zalan zimmermann oldest_to_newest 1402805 0 334792 redblobgames 2018-02-28 18:10:54 -0800 Created attachment 334792 HTML page that demonstrates the SVG+CSS+transform bug I created an SVG with a <g> element that is rotated +30deg and a <text> element inside the g that's rotated -30deg. The text should end up rotated 0deg. <style> g.rotated { transform: rotate(30deg); } g.rotated text { transform: rotate(-30deg); } </style> <svg viewBox="-150 -150 300 300"> <g class="normal"> <rect x="-50" y="-50" width="100" height="100" /> <text>Test</text> </g> </svg> Live URL: https://www.redblobgames.com/x/1809-safari-svg-css-bug/test-case-reduction.html — click the button to change the class from "normal" to "rotated". If the class is "rotated" at page load, it renders correctly. If it's changed from "normal" to "rotated" after page load, it renders incorrectly — it applies the rotation to <g> but not to <text>. My guess is that the rendering of <g> is being cached. (The rect is there just to make it easier to see the rotation) It works correctly (text rotation is 0deg) in Firefox 58.0.2 and Chrome 64.0.3282.186 (Mac OS High Sierra 10.13.3). It does not work correctly in Safari 11.0.3 (13604.5.6) or WebKit Build r229115 (February 28, 2018, 5:11 PM PST). It also does not work correctly in Safari iOS 11.2.6. IE/Edge does not yet support CSS transforms on SVG elements so I did not test there. (Background: I encountered this while making a css transition with transforms on svg elements https://www.redblobgames.com/x/1808-hex-half-directions/ , distilled down, found that it wasn't related to the css transition.) 1403430 1 webkit-bug-importer 2018-03-02 17:07:48 -0800 <rdar://problem/38088345> 1716215 2 duvrai 2020-12-22 08:02:28 -0800 I looked a bit further and found similar bugs in SVG styles, the simplest one being: <text style="transform: translateX(20%)"> It won't work, while it's fine when using px instead of %. Credit: https://stackoverflow.com/questions/58230668/ But if you apply the style after page load it won't even work with px. A working fix is to wrap the <text> element in a <g> element and apply the transform style there. More examples in my fiddle: https://jsfiddle.net/duvrai/pyus1nc9/ 334792 2018-02-28 18:10:54 -0800 2018-02-28 18:10:54 -0800 HTML page that demonstrates the SVG+CSS+transform bug test-case-reduction.html text/html 1119 redblobgames PCFET0NUWVBFIGh0bWw+CjxoZWFkPgogIDxzdHlsZT4KICAgICAgc3ZnIHsgb3V0bGluZTogMnB4 IGRhc2hlZCBncmF5OyB3aWR0aDogNDAlOyB9CiAgICAgIHRleHQgeyB0ZXh0LWFuY2hvcjogbWlk ZGxlOyB9CiAgICAgIHJlY3QgeyBmaWxsOiBoc2woMjAwLCA1MCUsIDUwJSk7IH0KICAgICAgCiAg ICAgIGcucm90YXRlZCB7IHRyYW5zZm9ybTogcm90YXRlKDMwZGVnKTsgfQogICAgICBnLnJvdGF0 ZWQgdGV4dCB7IHRyYW5zZm9ybTogcm90YXRlKC0zMGRlZyk7IH0KICA8L3N0eWxlPgo8L2hlYWQ+ Cjxib2R5PgogIDxoMj5BY3R1YWw8L2gyPgoKICA8c3ZnIHZpZXdCb3g9Ii0xNTAgLTE1MCAzMDAg MzAwIj4KICAgIDxnIGNsYXNzPSJub3JtYWwiPgogICAgICA8cmVjdCB4PSItNTAiIHk9Ii01MCIg d2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIC8+CiAgICAgIDx0ZXh0PlRlc3Q8L3RleHQ+CiAgICA8 L2c+CiAgPC9zdmc+CgogIDxwPgogICAgQ2xpY2sgdG8gc2V0IDxjb2RlPmNsYXNzPC9jb2RlPiB0 byA8YnV0dG9uIG9uY2xpY2s9ImRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2cnKS5zZXRBdHRyaWJ1 dGUoJ2NsYXNzJywgJ3JvdGF0ZWQnKSI+cm90YXRlZDwvYnV0dG9uPgogIDwvcD4KICAKICA8aDI+ RXhwZWN0ZWQ8L2gyPgoKICA8cD4KICAgIEFmdGVyIGNsaWNraW5nIHRoZSBidXR0b24gYWJvdmUs IGl0IHNob3VsZCBsb29rIGxpa2UgdGhpczoKICA8L3A+CiAgCiAgPHN2ZyB2aWV3Qm94PSItMTUw IC0xNTAgMzAwIDMwMCI+CiAgICA8ZyBjbGFzcz0icm90YXRlZCI+CiAgICAgIDxyZWN0IHg9Ii01 MCIgeT0iLTUwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgLz4KICAgICAgPHRleHQ+VGVzdDwv dGV4dD4KICAgIDwvZz4KICA8L3N2Zz4KCiAgPHA+CiAgICBJdCBkb2VzIGluIEZpcmVmb3ggNTgu MC4yIGFuZCBDaHJvbWUgNjQuMC4zMjgyLjE4NiAoTWFjIE9TIEhpZ2ggU2llcnJhIDEwLjEzLjMp LiBJdCBkb2VzIG5vdCBpbiBTYWZhcmkgMTEuMC4zICgxMzYwNC41LjYpIG9yIFdlYktpdCBCdWls ZCByMjI5MTE1IChGRUJSVUFSWSAyOCwgMjAxOCwgNToxMSBQTSBQU1QpLiBUaGUgdGV4dCBpcyBy b3RhdGVkIGluIFNhZmFyaS4KICA8L3A+CiAgCjwvYm9keT4K