Question

你读得对。在办公室中的多台机器上进行测试，方案之间的唯一区别是浏览器大小。一位同事将它缩小到2000px的甜蜜点。当我们将浏览器的大小调整为＆gt; = 2000px宽并将鼠标悬停在具有变换动画的元素上时，页面上的各种元素 - 特别是具有CSS渐变背景的任何元素 - 将会闪烁。相反，如果您将浏览器的大小调整为＆lt;宽度为2000像素，鼠标悬停在同一元素上，不会发生闪烁。

其他人看到过这种奇怪的行为吗？为什么2000px是一个神奇的数字，以及2000px究竟发生了什么？

注意 - 我无法真正分享屏幕截图/视频/链接，因为此网站尚未公开，代码相对不必要，因为这似乎更像是一个浏览器问题。

注意2 - 我的问题实际上是围绕2000px在Safari中发生的事情，不一定是如何使用backface-visibility或translateZ等修复闪烁。原因是我们在整个网站中使用-webkit-font-smoothing: subpixel-antialiased;并使用任何这些技巧胜过整个页面的属性，为所有文本打开抗锯齿/灰度。

编辑 - 好的，抱歉没有提前完成此操作。以下是jsFiddle中的一些代码，可以重现该问题：http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

请记住，Safari必须设置为至少2000px宽才能实现。

Answer 1

令人沮丧吧？

请参阅EDIT4，了解为什么2000px是一个幻数。

您可以尝试一些事情。

将-webkit-transform-style: preserve-3d;添加到元素中闪烁。
将-webkit-backface-visibility: hidden;添加到要素的元素中闪烁。
将动画元素移动到父元素之外闪烁
元素都在。

编辑 - 韦斯利·黑尔斯说here “将硬件加速应用于已经加速的页面部分时，我遇到了一些错误的行为”

很难帮助您在没有任何代码的情况下进行调试。但对于初学者，我建议你在safari中打开调试模式。在终端中写'defaults write com.apple.Safari IncludeInternalDebugMenu -bool true'。

此后将显示“调试”菜单。选择绘图/合成标志＆gt;显示合成边框。

这将帮助您了解正在呈现的内容以及选择放入硬件加速的内容以及遗漏的内容。

EDIT2 - 这也值得一试：fast-animation-with-ios-webkit

关于iOs，但我已经体验过 - 在某些情况下 - 适用于iOs的解决方案也适用于osx。

EDIT3 - 如果你只是问大于2000px会发生什么，我可以肯定地说，在iPhone上，WebKit会创建不大于1024 x 1024的纹理，如果你的元素大于那个，它必须创建多个纹理。

Documentation on texture limitations

现在，当他们在iPhone上这样做时，如果他们在OsX上做同样的事情，我也不会感到惊讶，但是有更高的限制。

不知道这是不是你的情况。没有任何代码就无法判断。

EDIT4 - “TextureMapperTiledBackingStore中的实现非常简单，仅用于处理OpenGL中2000x2000纹理大小限制。”

因此，如果您的元素大于2000x2000，则必须创建多个纹理。

http://trac.webkit.org/wiki/CoordinatedGraphicsSystem

Answer 2

我发现将-webkit-backface-visibility: hidden;应用于翻译元素并将-webkit-transform: translate3d(0, 0, 0);应用于其所有子元素，然后闪烁消失。

请参阅Prevent flicker on webkit-transition of webkit-transform。

Answer 3

如果字体闪烁，请使用以下CSS：

html,body {
    -webkit-font-smoothing: antialiased;    
}

Answer 4

我注意到在应用CSS3后，Chrome中的变换元素看起来有点“脆”，文字未对齐。 Mathias中的解决方案对此没有影响。但这是奇怪的事情 - 在我应用webkit过滤器（即-webkit-filter: opacity(0.99999);）之后，正确渲染的元素和文本中的字母是对齐的。但在那之后，这些元素看起来有点模糊。也许这会对你的闪烁产生影响。

Answer 5

首先，感谢这里提供的出色解决方案。我一直认为我的代码肯定有问题。事实并非如此。我还推断出2000px边框的动画不能再顺利运行了。谢谢你们，我现在加上

/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
    .boxContent {
        -webkit-backface-visibility: hidden;
    }
}

我有条件地做了这个，因为事实上，在添加类之后，图片不会呈现抗锯齿。在我做的另一个地方

/*keep animation smooth in Safari above 2000px*/
.twothousand {
    -webkit-backface-visibility: hidden;
}

并通过JQuery添加和删除了附加类。所以转换是平滑的并且在完成后渲染（再次删除类）有点复杂，但它对我来说工作得很好，最终使Safari在2000px以上的动画流畅。干得好，伙计!!

Answer 6

我也遇到了同样的问题。当我在 mat-icon 浏览器中打开我的 angular 应用程序时，Safari 开始闪烁。它在 Chrome 浏览器中运行良好。在经历了上面回答的所有选项后，我的问题无法解决。所以最后，我将 transition 的 fab-button 属性设置为 none。它解决了这个问题。

Answer 7

解决我所有问题的简单解决方案是：

.app * {
  transform-style: preserve-3d;
}

CSS转换会导致Safari中出现闪烁，但仅当浏览器宽度> = 2000px时才会出现闪烁

7 个答案: