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.