我们的网站使用了许多现代的东西,例如鼠标视差,滚动视差,无限滚动,css剪辑动画等,其中大多数都使用了硬件加速动画transition: translate3d(...)
。
我花了很多时间进行浏览器测试,然后尝试并出错,直到它在每种浏览器上都可以工作为止–我认为–然后上周,一个客户端通知我Windows 7 Professional上最新的Chrome浏览器中存在一个错误,项目图像通过移动鼠标或滚动来闪烁地点。好吧,我们都知道Webkit闪烁的bug,所以我尝试了所有可以找到的解决方法,例如添加
-webkit-backface-visibility: hidden;
或者
-webkit-transform: translate3d(0, 0, 0);
或者
-webkit-transform-style: preserve-3d;
闪烁的元素,但没有运气。然后,我禁用了所有视差鼠标和滚动效果,使用了本机滚动等,但没有任何改变。现在我问自己是Webkit闪烁的东西还是Windows 7 Professional?还是两者在一起?使用Windows 7 Ultimate和Chrome,一切正常!
有人遇到过同样的问题吗?任何想法如何解决或减少这种不良影响?我只是疯了!这是网站的链接,它是Windows 7 Professional 32 Bit with Chrome(35.0.1916.153)独有的。
任何帮助将不胜感激。
经过一天的尝试与错误,我终于找到了解决方案。这不是Webkit闪烁的错误,因为CSS选择器在Windows上的Chrome浏览器中给了我这个问题
div.container > *:before { ... }
所以我换成
div.container > header:before, div.container > section:before, div.container > footer:before { ... }
就这样。也许这可以帮助某人。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句