CSS -webkit-transform 末尾:翻译图像闪烁或闪烁
当我测试 -webkit-transform:translate(500px ,0)
时,它足够平滑,但是一旦完成 img,它就会移动闪烁或闪烁。我在Android浏览器中进行了测试。
有什么办法可以消除这种闪烁吗?
我正在尝试复制 Android Market 应用程序中的顶部横幅(在平板电脑上)。看起来这一切都是通过 HTML/CSS 加载的方式完成的。
When I test a -webkit-transform: translate(500px ,0)
it does it smooth enough, but once it's finished the img it was moving flashes or flickers. I tested in an Android browser.
Is there any way to get rid of this flashing?
Im trying to replicate the top banner in the Android Market app (on a tablet). It appears that it's all done with HTML/CSS by the way it loads.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
-webkit-backface-visibility 应该是您的问题,但为了确保所有设备上的性能最佳,请缓存 DOM 并使用 translate3d,因为它是 GPU 加速的。
这是一个很好的来源,可以帮助您提高所有设备上的性能。
提高 HTML5 应用程序的性能
更新
translate3d 和其他 3d 属性不再是硬件加速在 Mac OS X Mountain Lion 或 iOS 6+ 上,请小心。
-webkit-backface-visibility should your problem, but to ensure that performance is optimal on ALL devices, cache the DOM and use translate3d as it is GPU accelerated.
This is a great source that can help you improve performance on all devices.
Improving Performance of HTML5 App
UPDATE
translate3d and other 3d properties are no longer hardware accelerated on Mac OS X Mountain Lion or iOS 6+, beware.