How to fix broken origin conversion on iOS11 and macOS10.12 Safari?

Question

I am trying to implement CSS animation using svg.
I expect 2 svg boxes to rotate (rotate) with transform-origin: center center; 360 degrees. It seems to behave as I expected from Chrome and Firefox, but not with macOS 10.12 (High Sierra) and iOS 11.0.x and 11.1 beta Safari.
It seems that transform-origin: center center; not working in safari?

Is there any way to fix this problem?

What I expect:

What I see in Safari:

Here is a sample code

HTML:

 svg(width=500, height=500, viewBox='0 0 500 500') rect(x=100, y=100, width=50, height=100) rect(x=400, y=100, width=50, height=100) 

CSS

 @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } rect { transform-origin: center center; animation-duration: 3s; animation-name: rotate; animation-iteration-count: infinite; animation-timing-function: linear; &:nth-child(1) { fill: red; } &:nth-child(2) { fill: blue; } } 

Here you can see the behavior by accessing Chrome and Safari: https://codepen.io/manaten/pen/aLeXjW

EDIT:

https://codepen.io/manaten/pen/aVzeEK Another example of a problem. It looks like the beginning is set as the center of the Safari svg element.

Answer 1

try converting-box: fill-box; this defines the layout field to which the transform and source transform properties pertain to

Answer 2

transform-box: fill-box; seems to solve the problem.

 rect { transform-origin: center center; transform-box: fill-box; animation-duration: 3s; animation-name: rotate; animation-iteration-count: infinite; animation-timing-function: linear; &:nth-child(1) { fill: red; } &:nth-child(2) { fill: blue; } } 

Your first transformation sample:

https://codepen.io/MichaelSchober/pen/QOPbKx

Powered by MacOS HighSierra 10.13.1 with Safari 11.0.1

The property is still experimentally tough. Therefore, be sure to check whether you agree with the browser:

https://developer.mozilla.org/de/docs/Web/CSS/transform-box