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

我在 chrome 中遇到 css3 变换旋转过渡的问题。过渡工作正常，但在完成后元素会移动一个像素。另一个奇怪的事情是，它只发生在页面居中时（margin:0 auto;）。如果您也删除过渡，该错误仍然存​​在。

你可以在这里看到它发生：

http://jsfiddle.net/MfUMd/1/ 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

Cheers

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

应该修复它！

Gino