CSS3 变换旋转导致 Chrome 偏移 1px

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

实际上只需将其添加到包含所有元素的站点容器中： -webkit-backface-visibility: hidden;

应该修！

吉诺

原文由 Gino 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

身体维度和变换结构之间的关系有些不寻常。我其实不是因为 fiddle 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);
}

这是更新的 小提琴

原文由 wandarkaf 发布，翻译遵循 CC BY-SA 3.0 许可协议