使用chrome/safari影响其他元素的CSS3转换

Question

我有一个问题,我的css3转换正在影响页面上的其他元素,甚至导致它们闪烁.我看到另一篇关于此的帖子,但他们没有解决这个问题.

http://scosha.mybigcommerce.com/w107b/当您滚动浏览导航时,您会看到动画css3转换.它在firefox中工作正常,没有闪烁但是使用chrome和safari,效果非常明显,你可以在下拉菜单项和页脚文本中看到它.

Answer 1

在Chrome过渡期间闪烁元素的工作解决方案是为父节点设置CSS:

-webkit-backface-visibility: hidden;

Answer 2

这是Chrome 22(显然是Safari)上Macintosh文本呈现的已知问题.GPU加速导致MacOS从子像素切换到灰度抗锯齿,这使得字体粗细看起来明显减少.

更新:

正如下面的OP注释,修复是应用-webkit-font-smoothing: antialiased- 它始终应用灰度消除锯齿.如果你这样做,你可能想要增加你的字体权重,因为灰度抗锯齿文本看起来比子像素更薄

您可以通过应用导致内容始终为GPU加速的属性(例如背面可见性:隐藏)来获得相同的效果,但因为这些不能保证在未来的浏览器版本中引起GPU加速 - 所以它将来会更加贴切只需指定灰度.

Answer 3

我的解决方案是将波纹管css应用于所有受影响元素的父级.

-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);