Nested CSS transforms on SVG elements not updated after page load

• Component: SVG
• Status: NEW ---

[Amit Patel]

Created attachment 334792 [details]
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.)

[Radar WebKit Bug Importer]

<rdar://problem/38088345>

[Thomas Duvrai]

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/