为什么与Blink和Gecko相比，Webkit / Safari（iOS，macOS）以不同的顺序渲染我的SVG转换？

我有一个星号图标的最小SVG图像：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
        <style>
        .a {
            fill: red;
            transform-box: fill-box;
            transform-origin: center;
        }
        </style>
    </defs>
    <!-- x = 45 because it's 10px wide and centered around x=50, so x0 == 45, x1 == 55 -->
    <rect class="a" x="45" y="0" width="10" height="100"/>
    <rect class="a" x="45" y="0" width="10" height="100" transform="rotate(-45)"/>
    <rect class="a" x="45" y="0" width="10" height="100" transform="rotate( 45)"/>
    <rect class="a" x="45" y="0" width="10" height="100" transform="rotate(-90)"/>
</svg>

这可以在Firefox 75和Chrome 80中正确显示，但在iOS或macOS上无法正确显示：

Firefox 75：

Chrome 80：

iOS 13上的Safari

但是在Safari上，与每个元素transform-origin的transform=""属性相比，似乎被忽略或乱序应用<rect>：

有人告诉我它在macOS Safari上呈现相同的损坏图像（我现在无法立即访问macOS Safari，因此无法从此处发布屏幕截图，抱歉）。

I've searched around Google to see if Safari/WebKit is lacking support for transform-box, transform-origin or transform="rotate(deg)" but as far as I can tell they've all been fully supported by Safari for years - so I don't understand why it's applying the transformations out-of-order and causing the broken rendering.