你读得对.在办公室中的多台机器上进行测试,方案之间的唯一区别是浏览器大小.一位同事将它缩小到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宽才能实现.