CSS3转换导致屏幕闪烁或别名字体

Question

我试图在元素上应用一些CSS3转换,有两个问题.该网页包含大量的便签,我想通过应用带有一些JavaScript的CSS类来放大点击(缩放)或翻转悬停(rotateY)它们.

例如,缩放类是这样的:

.postit-container.enabled {
  z-index: 15;
  -webkit-transition: -webkit-transform 0.15s ease-in-out;
  -moz-transition: -moz-transform 0.15s ease-in-out;
  -o-transition: -o-transform 0.15s ease-in-out;
  -ms-transition: -ms-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}

对于翻页效果我只使用rotateY(180deg)上:hover.

每个stickies都有6deg的默认旋转,我用nth-childCSS3选择器伪随机旋转以应用不同的旋转.

问题是,缩放或翻转时,屏幕闪烁,随机和页面上的某些字体被改变,并且长相丑陋,但不是所有的人,这真是不可思议.

这是一个jsfiddle,所以你可以自己看到问题:

JSfiddle (在Mac OS X 10.6.8上使用Google Chrome 12.0.742.122测试)

我已经尝试过这个-webkit-backface-visibility技巧了,闪烁已经消失并且肯定会变换,但字体看起来一直都很难看.

我希望有人有魔术,因为我真的不明白这种行为.

Answer 1

你可以把例子放到一个jsfiddle中,截图并没有很好地说明问题.

但是我遇到了类似的问题,我也找不到问题的原因.或者想出可能发生的事情的解释.

但是我找到了一个适用于我的解决方案.

-webkit-transform-style: preserve-3d;

我将它应用于所有似乎有渲染问题的元素.在我的情况下,一些元素没有被转换,甚至在同一个容器中,以一种看似随机和不一致的方式实现.

就像是.

.header *, .sticky * {
    -webkit-transform-style: preserve-3d;
}

我很乐意提供有关保存-3d的解释,但是我发现文档非常模糊.

关于我收集的关键是它可以解决问题(它做了)并且它有两个属性

-webkit-transform-style: preserve-3d;
//and
-webkit-transform-style: flat;

默认情况下使用Flat.

对不起,我无法给出更详细的答案,但我希望这能为您解决问题.

如果有人在webKit上工作,你可以提供和解释这是什么.

Answer 2

尝试将以下内容添加到CSS中:

-webkit-transform: translateZ(0);

这将迫使chrome硬件加速,因为chrome经常决定不使用它