CSS3 转换影响其他元素与 chrome/safari

Posted 2023-03-06

【中文标题】CSS3 转换影响其他元素与 chrome/safari

【英文标题】：CSS3 Transform affecting other elements with chrome/safari

【发布时间】：2012-10-01 09:13:16

【问题描述】：

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

http://scosha.mybigcommerce.com/w107b/ 当您滚动导航时，您会看到动画 css3 转换。它在 Firefox 中运行良好，没有闪烁，但在 chrome 和 safari 中效果非常明显，您可以在下拉菜单项以及页脚文本中看到它。

【问题讨论】：

它运行良好 - Mac 上的 Chrome 24

我在多台mac上测试过safari/chrome，safari的效果其实更差。

链接已失效。但无论如何，我在我的电脑上的 chrome 24 上也有同样的体验。

【参考方案1】：

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

-webkit-backface-visibility: hidden;

【讨论】：

在我看来，这似乎只是将字体渲染设置为灰度抗锯齿。

添加到闪烁元​​素（不是父元素）时，这对我有用。

【参考方案2】：

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

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

【讨论】：

只有-webkit-transform:translate3d(0,0,0); 也对我有用。

【参考方案3】：

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

更新：

正如下面的 OP 所述，解决方法是应用 -webkit-font-smoothing: antialiased - 它始终应用灰度抗锯齿。如果你这样做，你可能会想要增加你的字体粗细，因为灰度抗锯齿文本看起来明显比亚像素薄

您可以通过应用导致内容始终被 GPU 加速的属性（例如 back-face-visibility: hidden）来获得相同的效果，但因为这些属性不能保证在未来的浏览器版本中导致 GPU 加速 - 更多的是未来证明可以简单地指定灰度。

【讨论】：

谢谢老兄找到了我想要的东西。对于那些最终从 googlesphere 来到这里的人：-webkit-font-smoothing: antialiased;似乎解决了这个问题。

可能值得注意的是设置 -webkit-font-smoothing: subpixel-antialiased;将实现相同的效果，而不会导致类型看起来更薄。

或don't use -webkit-font-smoothing: antialiased

谢谢@AndrewPhilpott ！！！在我看到你的评论之前，我以为我会被那条薄薄的文字困住。

【参考方案4】：

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

临时修复是添加web-kit 修复并移除过渡：

-webkit-transition: none;