Jak naprawić złamane pochodzenie transformacji na iOS11 i macOS10.12 Safari?

Question

Próbuję zaimplementować animację CSS za pomocą svg.
Spodziewam się, że 2 pola svg obraca się (wirowanie) z transform-origin: center center; 360 stopni. Wygląda na to, że zachowuje się tak, jak się spodziewałem w przypadku Chrome i Firefox, ale nie w wersjach MacOS 10.12 (High Sierra) i iOS 11.0.x i 11.1 beta Safari.
Wygląda na to, że transform-origin: center center; nie działa w Safari?

Czy istnieje sposób rozwiązania tego problemu?

Czego oczekuję:

Co widzę na Safari:

Oto przykładowy kod

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; 
    } 
} 

Widać tutaj zachowanie poprzez dostęp z Chrome i Safari: https://codepen.io/manaten/pen/aLeXjW

EDIT:

https://codepen.io/manaten/pen/aVzeEK Innym przykładem problemu. Wygląda na to, że pochodzenie jest ustawione na środek elementu svg przez Safari.

Answer 1

spróbuj transform-box: wypełnij pole; definiuje to pole układu, do którego właściwości transformacji i pochodzenia transformacji odnoszą się do:

Answer 2

: transform-box: fill-box; wydaje się, że rozwiązuje 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; 
    } 
} 

Twoja pierwsza próbka z transform-box:

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

Prace na MacOS HighSierra 10.13.1 z Safari 11.0.1

nieruchomości jest nadal trudne eksperymentalny. Więc upewnij się, aby sprawdzić, czy są w porządku z compabtility przeglądarki:

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