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