CSS Transform会在Safari中导致闪烁,但只有当浏览器宽度> = 2000px时

你读这个权利。在办公室的多台机器上进行测试，场景之间的唯一区别是浏览器大小。一个同事把它缩小到一个2000px的甜蜜点。当我们各自调整我们的浏览器宽度> = 2000px，鼠标悬停在一个具有变换动画的元素，页面上的各种元素 – 特别是任何CSS渐变背景的元素 – 将闪烁。相反，如果您调整浏览器的大小， 2000px宽和鼠标在同一元素上没有闪烁发生。

还有谁看到这个奇怪的行为？为什么2000px是一个魔术数字，什么发生在2000px？

注意 – 我不能真正地分享屏幕截图/视频/链接，因为这个网站还没有公开，代码是相对不必要的，因为这似乎是一个浏览器的问题比任何。

注2 – 我的问题在这里真的围绕什么发生在Safari在2000px，不一定如何解决闪烁与背面可见性或translateZ等。原因是我们使用-webkit-font-smoothing：subpixel-antialiased;在整个网站和使用任何这些诀窍胜于整个页面的属性，打开抗锯齿/灰度所有文本。

编辑 – 好吧，对不起没有这样做。这里是一个代码在一个jsfiddle应该重现的问题：http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

记住，Safari必须设置为至少2000px宽才能发生。

解决方法

沮丧？

看到EDIT4为什么2000px是一个魔术数字的答案。

有几件事你可以试试。

>添加-webkit-transform-style：preserve-3d;到的元素
闪烁。
> add -webkit-backface-visibility：hidden;到的元素
闪烁。
>将动画元素移动到父级的闪烁之外
元素在内。

编辑 –
韦斯利哈勒斯，here说
“对页面中已加速的部分应用硬件加速时，我遇到了毛刺行为”

它很难帮助你调试这个没有任何代码。但是对于初学者，我建议你在safari中打开调试模式。在终端中写入默认值com.apple.Safari IncludeInternalDebugMenu -bool true’。

之后，将显示一个调试菜单。选择绘图/合成标志>显示合成边框。

这将帮助你看到什么正在渲染，并选择什么放在硬件加速和什么遗漏。

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

它关于iOs，但我已经经历了 – 在某些情况下，工作在iOs的解决方案也适用于osx。

EDIT3 –
如果你只是问当它的大于2000px的时候会发生什么，我可以告诉你，在iPhone上，WebKit创建不大于1024×1024的纹理，如果你的元素大于它，它必须创建多个纹理。

Documentation on texture limitations

现在，当他们在iPhone上做，它不会惊讶我，如果他们在OsX上做同样的，但有一个更高的限制。

不知道这是你的情况下。不可能告诉没有任何代码。

EDIT4 –
“TextureMapperTiledbackingStore中的实现非常简单，仅用于解决OpenGL中2000×2000纹理大小限制。

所以，如果你的元素大于2000×2000它必须创建多个纹理。

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

原文地址：https://www.jb51.cc/css/220371.html