如何修复iOS11和macOS10.12 Safari上损坏的转换原点? [英] How to fix broken transform-origin on iOS11 and macOS10.12 Safari?

问题描述

我正在尝试使用svg实现CSS动画.
我预计2个svg框将以 transform-origin:center center; 360度旋转(旋转).看起来它的行为符合我对Chrome和Firefox的预期，但对macOS 10.12(高Sierra)以及iOS 11.0.x和11.1 beta Safari却没有.似乎 transform-origin:center center; 在Safari中不起作用?

I'm trying to implement CSS animation by using svg.
I am expecting that 2 svg boxes is rotating (spinning) with transform-origin: center center; 360 degrees. Looks like it behave what I expected with Chrome and Firefox but not with macOS 10.12 (High Sierra) and iOS 11.0.x and 11.1 beta Safari.
Seems like transform-origin: center center; does not work in Safari?

有什么办法可以解决此问题?

Is there any way to fix this issue?

我期望的是:

我在Safari上看到的内容:

What I see on Safari:

这是示例代码

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

您可以通过使用Chrome和Safari进行访问来查看此行为: https://codepen.io/manaten/pen/aLeXjW

You can see the behavior here by accessing with Chrome and Safari: https://codepen.io/manaten/pen/aLeXjW

https://codepen.io/manaten/pen/aVzeEK 问题的另一个例子.Safari似乎将原点设置为svg元素的中心.

https://codepen.io/manaten/pen/aVzeEK Another example of the issue. Looks like origin is set to be the center of svg element by Safari.

推荐答案

transform-b​​ox:fill-box;似乎解决了这个问题.

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

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 sample with transform-box:

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

在具有Safari 11.0.1的MacOs HighSierra 10.13.1上工作

Works on MacOs HighSierra 10.13.1 with Safari 11.0.1

该性能仍处于试验阶段.因此，请确保检查浏览器的兼容性是否可以:

The property is still experimental tough. So make sure to check if you are okay with the browser compabtility:

https://developer.mozilla.org/de/docs/Web/CSS/transform-b​​ox

这篇关于如何修复iOS11和macOS10.12 Safari上损坏的转换原点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！