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

Question

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

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

Answer 1

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

-webkit-backface-visibility: hidden;

Answer 2

这是a known issue，在Chrome 22上显示Macintosh文本（显然是Safari）。 GPU加速导致MacOS从子像素切换到灰度抗锯齿，这使得字体粗细看起来明显减少。

更新

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

您可以通过应用导致内容始终为GPU加速的属性（例如背面可见性：隐藏）来获得相同的效果，但因为这些不能保证在未来的浏览器版本中引起GPU加速 - 它更多未来证明只需指定灰度。

Answer 3

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

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

Answer 4

我在Chrome中遇到了同样的问题，但没有Firefox。

临时修复是添加web-kit修复并删除转换：

-webkit-transition: none;