CSS3的transform旋转在Chrome中导致1像素的偏移

Question

在使用CSS3的转换旋转过渡时，我在Chrome浏览器中遇到了一个问题。过渡效果很好，但就在完成后，元素会移动一个像素。另一个奇怪的事情是，只有当页面居中(margin:0 auto;)时才会发生这种情况。即使去掉过渡效果，这个错误仍然存在。

您可以在这里看到它的发生：

http://jsfiddle.net/MfUMd/1/

HTML:

<div class="wrap">
    <img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>

<div class="wrap">
    <div class="block"></div>
</div>

CSS：

.wrap {
    margin:50px auto;
    width: 100px;
}
.block {
    width:30px;
    height:30px;
    background:black;
}
.target,.block {
    display:block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.target:hover,.block:hover {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

注释掉 margin:0 auto; 这一行就可以去掉它。

有人有什么想法可以在保持页面居中的同时停止这个现象吗？

我在OSX 10.6.8上使用版本24.0.1312.57。

干杯！

- DonutReply

---

我没有注意到块的移位。它也发生在块上吗？ - JSuar

无法在Chrome 24.0.1312.57中复现。 - methodofaction

它会在过渡完成后向上移动1像素，这对两者都适用。 - DonutReply

我在 Mac OS X 上的 Chrome 24 上看到了它 - 这非常明显。 - Michael Mullany

我在Chrome中通过“工具>报告问题”进行了报告。如果您想在Chromium中进行测试和报告，请继续。 - DonutReply

Answer 1

实际上只需将以下代码添加到包含所有元素的站点容器中即可：

-webkit-backface-visibility: hidden;

应该会解决问题！

Gino

- Gino

---

谢谢！我在Chrome中进行简单的不透明度转换时也遇到了1像素偏移的问题。将-webkit-backface-visibility：hidden添加到容器中解决了所有问题。 - thenickdude

编辑了答案以包括 -webkit- 前缀。之前没有，因此有上面的注释。 - Henrik N

好的...我以为人们会添加webkit，因为这是一个webkit修复...谢谢！ - Gino

有人知道这个为什么有效吗？我感觉在不理解的情况下把东西放进我的CSS文件中很奇怪。 - Charlie OConor

这种情况在 Firefox 中也发生过，所以我不确定这只是 Chrome 的问题。 - Rokit

Answer 2

我也遇到了同样的问题，我通过在使用转换的 div 的 css 中添加以下内容来解决它：

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

如果您只使用2D，那么无需使用额外的东西，Backface用于基于3D的转换。

- Delmontee

---

谢谢你使用 transform 并给予的赞美，这个答案解决了我的问题。 - Alexis B.

天啊，这个在我尝试的完全不相关的转换上也起作用了；但是既然你提到了“基于3D的过渡效果”，我就试了一下。结果竟然奏效了...谢谢！ - taketheleap

@FredK：只需将其添加到您的转换值列表中即可。在我的情况下，添加 translateZ(0) 就足够了。 - wortwart

Answer 3

will-change: transform; 在元素上的应用让我在2022年（Chrome浏览器）受益匪浅。缩放动画之后，元素内文本不再出现1像素的偏移。

- Vladimir Tolstikov

---

不可能！但它在2023年10月对最新的Chrome有所帮助！ - undefined

Answer 4

对于3D变换，请使用以下内容：

-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);

- Silvia Malavasi

Answer 5

在变换的结构和身体尺寸之间存在一些异常。实际上，我认为这是因为小提琴 iframe 包含了代码预览。

无论如何，我建议采用以下方法：

body{
  width:100%;
  float:left;
}

.wrap {
  margin: 50px 45%;
  width: 5%;
  float: left;
}
.block {
  width:30px;
  height:30px;
  background:black;
}
.target,.block {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

这里是更新后的fiddle

- wandarkaf