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. It looks like the bug was fixed in Safari 17 (2023)

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


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[1]

Email me , or tweet @redblobgames, or comment: