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的主要内容,如果未能解决你的问题,请参考以下文章

变换上的 CSS3 动画:旋转。获取旋转元素当前度数的方法?

没学过线代也能读懂的CSS3 matrix

图片轮转切换效果

CSS3——3D旋转图(跑马灯效果图)

CSS3 变换:旋转;在 IE9 中

大学没学过数学也要理解 CSS3 transform 中的 matrix