logo标签列表

CSS3过渡在Safari中会使旋转的元素偏移1像素

csssafaricss-transforms
3

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

  1. 宽度为奇数的问题。您可以看到（查看边框），底部元素最初相对其父元素向右偏移1px，并在过渡时更多地向右偏移。
  2. 宽度为偶数的问题。初始状态看起来很好，但在过渡时也向右移动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中修复它的建议吗？

2个回答
6
在这里确认，在2021年仍然需要在Safari上使用will-change以实现平滑旋转。 - Markus T.
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接