CSS3 Transition在Safari

Question

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

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

这是偶数情况下的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中修复它的任何建议吗？

Answer 1

看看backface-visibility属性，它可以解决您的问题：

backface-visibility: hidden;

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

Answer 2

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

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