Làm thế nào để sửa chữa nguồn gốc biến đổi bị hỏng trên iOS11 và macOS10.12 Safari?

Question

Tôi đang cố gắng triển khai hoạt ảnh CSS bằng cách sử dụng svg.
Tôi hy vọng rằng 2 hộp svg đang quay (quay) với transform-origin: center center; 360 độ. Dường như nó hoạt động những gì tôi mong đợi với Chrome và Firefox nhưng không phải với macOS 10.12 (High Sierra) và iOS 11.0.x và 11.1 beta Safari.
Có vẻ như transform-origin: center center; không hoạt động trong Safari?

Có cách nào để khắc phục sự cố này không?

Những gì tôi mong đợi:

gì tôi nhìn thấy trên Safari:

Dưới đây là một số mẫu mã

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

Bạn có thể thấy hành vi ở đây bằng cách truy cập với Chrome và Safari: https://codepen.io/manaten/pen/aLeXjW

EDIT:

https://codepen.io/manaten/pen/aVzeEK Một ví dụ khác về vấn đề này. Có vẻ như nguồn gốc được đặt là trung tâm của yếu tố svg bởi Safari.

Answer 1

thử chuyển đổi hộp: điền vào ô; điều này xác định hộp bố cục, thuộc tính biến đổi và nguồn gốc biến đổi có liên quan đến

Answer 2

hộp chuyển đổi: hộp điền; dường như giải quyết vấn đề.

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

mẫu đầu tiên của bạn với hộp transform-:

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

Hoạt động trên hệ điều hành MacOS HighSierra 10.13.1 với Safari 11.0.1

tài sản này vẫn còn thực nghiệm khó khăn. Vì vậy, hãy chắc chắn để kiểm tra xem bạn là okay với compabtility trình duyệt:

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