Bug 183237 - Nested CSS transforms on SVG elements not updated after page load
Summary: Nested CSS transforms on SVG elements not updated after page load
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 11
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2018-02-28 18:10 PST by Amit Patel
Modified: 2020-12-22 08:02 PST (History)
6 users (show)

See Also:

HTML page that demonstrates the SVG+CSS+transform bug (1.09 KB, text/html)
2018-02-28 18:10 PST, Amit Patel
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Amit Patel 2018-02-28 18:10:54 PST
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.

      g.rotated { transform: rotate(30deg); }
      g.rotated text { transform: rotate(-30deg); }

  <svg viewBox="-150 -150 300 300">
    <g class="normal">
      <rect x="-50" y="-50" width="100" height="100" />

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.)
Comment 1 Radar WebKit Bug Importer 2018-03-02 17:07:48 PST
Comment 2 Thomas Duvrai 2020-12-22 08:02:28 PST
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: