Bra*_*ham 35 css safari transform css3 css-transitions
你读得对.在办公室中的多台机器上进行测试,方案之间的唯一区别是浏览器大小.一位同事将它缩小到2000px的甜蜜点.当我们每个人将浏览器的大小调整为> = 2000px宽并将鼠标悬停在具有变换动画的元素上时,页面上的各种元素 - 特别是具有CSS渐变背景的任何元素 - 将会闪烁.相反,如果您将浏览器的大小调整为<2000px宽并将鼠标悬停在同一元素上,则不会发生闪烁.
其他人看到过这种奇怪的行为吗？为什么2000px是一个神奇的数字,2000px究竟发生了什么？
注意 - 由于此网站尚未公开,我无法真正共享屏幕截图/视频/链接,并且代码相对不必要,因为这似乎更像是一个浏览器问题.
注2 - 我的问题实际上是围绕在2000px的Safari中发生了什么,不一定是如何修复闪烁backface-visibility或translateZ等等.原因是我们-webkit-font-smoothing: subpixel-antialiased;在整个网站中大量使用并使用任何这些技巧胜过整个页面的属性,为所有文本打开抗锯齿/灰度.
编辑 -好的,抱歉没有早点这样做.这里有一些jsFiddle中的代码应该重现这个问题:http://jsfiddle.net/brandondurham/ujPMK/embedded/result/
请记住,Safari必须设置为至少2000px宽才能实现.
Spo*_*ken 57
沮丧吧？
有关2000px为幻数的答案,请参阅EDIT4.
你可以试试几件事.
添加-webkit-transform-style: preserve-3d;到闪烁的元素.
添加-webkit-backface-visibility: hidden;到
闪烁的元素.
将动画元素移动到闪烁
元素所在的父元素之外.
编辑 - Wesley Hales,在这里说道 "当我将硬件加速应用到已加速的页面部分时,我遇到了错误的行为"
没有任何代码很难帮助您调试.但对于初学者,我建议你在safari中打开调试模式.在终端中写'defaults write com.apple.Safari IncludeInternalDebugMenu -bool true'.
在此之后,将显示"调试"菜单.选择"绘图/合成标志">"显示合成边框".
这将帮助您了解正在呈现的内容以及选择放入硬件加速的内容以及遗漏的内容.
EDIT2 - 这也值得一试:fast-animation-with-ios-webkit
它关于iO,但我已经体验过 - 在某些情况下 - 适用于iOs的解决方案也适用于osx.
EDIT3 - 如果您只是询问当它大于2000px时会发生什么,我可以肯定地说,在iPhone上,WebKit会创建不大于1024 x 1024的纹理,如果你的元素大于那个,它必须创建多个纹理.
现在,当他们在iPhone上进行操作时,如果他们在OsX上做同样的事情,我也不会感到惊讶,但是有更高的限制.
不知道这是不是你的情况.没有任何代码就无法判断.
EDIT4 - " TextureMapperTiledBackingStore中的实现非常简单,仅用于解决OpenGL中2000x2000纹理大小的限制."
因此,如果您的元素大于2000x2000,则必须创建多个纹理.
http://trac.webkit.org/wiki/CoordinatedGraphicsSystem
Rup*_*tta 31
我发现应用-webkit-backface-visibility: hidden;到翻译元素及其-webkit-transform: translate3d(0, 0, 0);所有孩子,闪烁然后消失.
请参阅防止webkit-transform的webkit-transition上的闪烁.
小智 8
如果字体闪烁,请使用以下CSS:
html,body {
-webkit-font-smoothing: antialiased;
}