CSS3 过渡在 Safari 中将旋转的元素移动 1px答案

【问题标题】：CSS3 Transition shifts rotated element by 1px in SafariCSS3 过渡在 Safari 中将旋转的元素移动 1px
【发布时间】：2016-12-18 04:56:26
【问题描述】：

Safari 无法正确渲染 180 度旋转的元素。特别是有两个可以显示的例子（使用 Safari 9.1）：

Issue with odd width. 您可以看到（查看边框）底部元素最初相对于其父 div 向右移动了 1px，并且在过渡时移动更多。
Issue with even width. 最初看起来不错，但在过渡时也会向右移动 1px。

这是偶数情况的 css（奇怪的是所有宽度和高度都减去 1px）：

.no-overflow-container {
  width: 518px;
  height: 368px;
  margin: 10px;
  overflow: hidden;
}

.container {
  width: 368px;
  height: 368px;
  background: red;
  margin-right: 30px;
  -webkit-transition: margin 350ms;
  -moz-transition: margin 350ms;
  transition: margin 350ms;
}

.container:hover {
  margin-left: 150px;
}

.threed-container {
  width: 100%;
  height: 100%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  position: relative;
  box-sizing: border-box;
}

.faced-item {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  font-size: 28px;
  position: absolute;
  padding: 30px;
  box-sizing: border-box;
  }

.rotated-item {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  font-size: 28px;
  position: absolute;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg); 
  box-sizing: border-box;
  }

还有 HTML：

<div class="no-overflow-container">
  <div class="container">
    <div class="threed-container">
      <div class="faced-item">
        HELLO WORLD FACE
      </div>
    </div>
  </div>
</div>

<div class="no-overflow-container">
  <div class="container">
    <div class="threed-container">
      <div class="rotated-item">
        HELLO WORLD BACKFACE
      </div>
    </div>
  </div>
</div>

它在 Chrome(52) 和 Firefox(47) 中运行良好。

那么关于如何在 Safari 中修复它有什么建议吗？

【问题讨论】：

标签： css safari css-transforms

【解决方案1】：

我使用will-change: transform; (Safari 10) 解决了这个问题

https://jsfiddle.net/4hocy9qt/2/

【讨论】：

在这里确认 2021 年仍然需要在 Safari 上进行更改以实现平滑旋转。

【解决方案2】：

看看backface-visibilityproperty，它可以解决你的问题：

backface-visibility: hidden;

https://css-tricks.com/almanac/properties/b/backface-visibility/

【讨论】：