Safari SVG CSS Bug

from Red Blob Games
28 Feb 2018

This page demonstrates a bug in Safari 11, on both Mac and iOS. Both SVGs are the same, except for the initial class. After 1 second, I change the class to match, so that they’re the same. In Chrome and Firefox, after 1 second the SVGs will render the same. In Safari, after 1 second the SVGs will not render the same.

Click to set class to . After clicking, these two diagrams should look the same.

Test
Test

The parent element has rotate(30deg) and the child has rotate(-30deg) which should make the text rotated 0deg. I suspect Safari is caching the rendered outer element and then rotating it, not taking into account the inner rotation.

I filed a bug

Email me at , or tweet to @redblobgames, or post a public comment: