Google chrome CSS3变换旋转导致Chrome中的1px偏移
我在chrome中遇到了一个css3转换-旋转转换的问题。过渡工作正常,但刚完成后,元素移动了一个像素。另一件奇怪的事情是,它只在页面居中时发生(Google chrome CSS3变换旋转导致Chrome中的1px偏移,google-chrome,css,css-transitions,css-transforms,Google Chrome,Css,Css Transitions,Css Transforms,我在chrome中遇到了一个css3转换-旋转转换的问题。过渡工作正常,但刚完成后,元素移动了一个像素。另一件奇怪的事情是,它只在页面居中时发生(margin:0auto;)。如果您也删除了转换,那么bug仍然存在 你可以在这里看到它的发生: HTML: 注释掉页边距:0自动行以使其消失 有人知道如何在保持页面居中的同时阻止这种情况吗 我在OSX 10.6.8上使用24.0.1312.57版 干杯身体维度和变换结构之间的关系有些不同寻常。事实上,我不这么认为是因为fiddle iframe包含
margin:0auto;
)。如果您也删除了转换,那么bug仍然存在
你可以在这里看到它的发生:
HTML:
注释掉页边距:0自动代码>行以使其消失
有人知道如何在保持页面居中的同时阻止这种情况吗
我在OSX 10.6.8上使用24.0.1312.57版
干杯身体维度和变换结构之间的关系有些不同寻常。事实上,我不这么认为是因为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);
}
下面是更新的实际上只需将其添加到包含所有元素的站点容器中:
-webkit背面可见性:隐藏代码>
应该修好它
Gino我也有同样的问题,我通过在使用转换的div的css中添加以下内容来修复它:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
背面用于基于3D的过渡,但如果您仅使用2D,则不需要额外的内容。我没有注意到块中的移动。在Chrome 24.0.1312.57中两者都无法复制,在转换完成后将1px向上移动我在Chrome 24上看到了OSX-这非常明显,我现在似乎已经停止了,不知道这是什么美丽,谢谢!它没有为我工作,因为是,但添加供应商前缀修复它。谢谢!当我在Chrome中进行简单的不透明度转换时,我在1px转换上也遇到了同样的问题。添加-webkit背面可见性:隐藏到容器中修复了所有问题。编辑答案以包含-webkit-
前缀。以前没有,因此上面的评论。有人知道为什么这样做吗?我觉得在不理解css的情况下把东西放进css很奇怪。这在Firefox中也发生过,所以我不确定这只是一个Chrome的东西。感谢转换的补充,这个答案解决了我的问题。天哪,这在我尝试的一个完全不相关的转换上起了作用;但既然你提到了“基于3D的过渡”,我就试一试。瞧。。。谢谢@弗雷德克:只要把它添加到你的变换值列表中就行了。在我的例子中,添加translateZ(0)
就足够了。
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);
}
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);