还有谁看到这个奇怪的行为?为什么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它必须创建多个纹理。