CSS3变换旋转导致Chrome中的1px移位 [英] CSS3 transform rotate causing 1px shift in Chrome

问题描述

我有一个问题在铬与css3变换旋转转换。转换工作正常，但只是在完成元素移位一个像素后。另一个奇怪的事情是，它只发生在页面中心（ margin：0 auto; ）。

I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.

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

You can see it happening here:

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;

Comment out the margin:0 auto; line to make it go away.

任何人都有任何想法，如何阻止这一点，同时保持页面居中？

Anyone have any ideas of how to stop this while keeping the page centered?

我在OSX 10.6.8上使用版本24.0.1312.57

I'm using Version 24.0.1312.57 on OSX 10.6.8

干杯

推荐答案

实际上只是添加到包含所有元素的网站容器：
-webkit-backface-visibility：hidden;

Actually just add this to the site container which holds all the elements: -webkit-backface-visibility: hidden;

应该修复它！

Gino

这篇关于CSS3变换旋转导致Chrome中的1px移位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！