CSS3 变换旋转导致 Chrome 偏移 1px
Posted
技术标签:
【中文标题】CSS3 变换旋转导致 Chrome 偏移 1px【英文标题】:CSS3 transform rotate causing 1px shift in Chrome 【发布时间】:2013-01-21 16:13:37 【问题描述】:我在使用 css3 变换旋转过渡的 chrome 中遇到问题。过渡工作正常,但就在它完成元素移动一个像素之后。另一个奇怪的事情是它只发生在页面居中时(margin:0 auto;
)。如果您也删除转换,错误仍然存在。
你可以在这里看到它:
http://jsfiddle.net/MfUMd/1/
html:
<div class="wrap">
<img src="https://github.com/favicon.ico" class="target" />
</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
干杯
【问题讨论】:
我没有注意到块的变化。它也发生在街区吗? 无法在 Chrome 24.0.1312.57 中重现 两者都会发生,在过渡完成后向上移动 1px 我在 Chrome 24 for OSX 上看到它 - 非常明显 我现在好像停止了,不知道为什么 【参考方案1】:身体维度和变换结构之间的关系有些不寻常。我其实不是因为 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);
这是更新后的fiddle
【讨论】:
【参考方案2】:实际上只需将其添加到包含所有元素的站点容器中:
-webkit-backface-visibility: hidden;
应该修复它!
吉诺
【讨论】:
太漂亮了,谢谢!它对我不起作用,但添加供应商前缀修复了它。 谢谢!当我在 Chrome 中进行简单的不透明度转换时,我遇到了与 1px 转换相同的问题。将 -webkit-backface-visibility:hidden 添加到容器中可以解决所有问题。 编辑了答案以包含-webkit-
前缀。以前没有,因此上面的 cmets。
有谁知道为什么会这样?在不理解它们的情况下将东西放入我的 css 中,我感到很奇怪。
这在 Firefox 中也发生在我身上,所以我不确定这只是 Chrome 的问题。【参考方案3】:
我遇到了同样的问题,我通过在使用转换的 div 的 css 中添加以下内容来修复它:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
背面用于基于 3D 的过渡,但如果您只使用 2D,则不需要额外的东西。
【讨论】:
感谢transform
的补充,这个答案解决了我的问题。
天哪,这对我正在尝试的完全不相关的转换起作用;但既然你提到了“基于 3D 的过渡”,我就试一试。瞧……谢谢!
@FredK:只需将其添加到您的转换值列表中即可。在我的情况下,添加 translateZ(0)
就足够了。以上是关于CSS3 变换旋转导致 Chrome 偏移 1px的主要内容,如果未能解决你的问题,请参考以下文章