[Webkit-unassigned] [Bug 183237] New: Nested CSS transforms on SVG elements not updated after page load

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=183237

            Bug ID: 183237
           Summary: Nested CSS transforms on SVG elements not updated
                    after page load
           Product: WebKit
           Version: Safari 11
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: redblobgames at gmail.com

Created attachment 334792

  --> https://bugs.webkit.org/attachment.cgi?id=334792&action=review

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.)

-- 
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/20180301/7aded672/attachment-0001.html>