如何修复 iOS 11 和 macOS V10.12 Safari 上损坏的变换源？答案

【问题标题】：How to fix broken transform-origin on iOS11 and macOS10.12 Safari?如何修复 iOS 11 和 macOS V10.12 Safari 上损坏的变换源？
【发布时间】：2018-04-08 20:36:12
【问题描述】：

我正在尝试使用 svg 来实现 CSS 动画。
我期待 2 个 svg 框以 transform-origin: center center; 360 度旋转（旋转）。看起来它在 Chrome 和 Firefox 上的表现符合我的预期，但在 macOS 10.12 (High Sierra) 和 iOS 11.0.x 和 11.1 beta Safari 上却没有。
好像transform-origin: center center; 在 Safari 中不起作用？

有没有办法解决这个问题？

我的期望：

我在 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

编辑：

https://codepen.io/manaten/pen/aVzeEK 问题的另一个例子。看起来 origin 被 Safari 设置为 svg 元素的中心。

【问题讨论】：

不确定是否会有所作为，但您是否尝试过使用供应商前缀？
由于我使用自动前缀，它不应该依赖于供应商前缀

标签： ios css safari css-animations

【解决方案1】：

尝试转换框：填充框；这定义了与 transform 和 transform-origin 属性相关的布局框

【讨论】：

【解决方案2】：

transform-box: 填充框；似乎解决了这个问题。

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

您的第一个带有变换框的示例：

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

适用于 MacOs HighSierra 10.13.1 和 Safari 11.0.1

该属性仍处于试验阶段。所以一定要检查你是否对浏览器的兼容性没问题：

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

【讨论】：