css - 在 CSS -webkit-transform : translate the image flashes or flickers 的末尾

标签 css css-transitions android-browser translate-animation

当我测试 -webkit-transform: translate(500px ,0) 时,它足够平滑,但是一旦完成 img,它就会闪烁或闪烁。我在 Android 浏览器中进行了测试。

有什么办法可以消除这种闪烁吗?

我正在尝试复制 Android 电子市场应用程序(在平板电脑上)中的顶部横幅。从加载的方式来看,这一切似乎都是用 HTML/CSS 完成的。

最佳答案

-webkit-backface-visibility 应该是你的问题,但为了确保在所有设备上性能最佳,缓存 DOM 并使用 translate3d,因为它是 GPU 加速的。

这是一个很好的资源,可以帮助您提高所有设备的性能。

Improving Performance of HTML5 App

更新

translate3d 和其他 3d 属性不再在 Mac OS X Mountain Lion 或 iOS 6+ 上进行硬件加速,请注意。

关于css - 在 CSS -webkit-transform : translate the image flashes or flickers 的末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8348705/

相关文章:

javascript - `Preload.js` 安卓设备加载部分文件失败

javascript - JQuery 滚动到 anchor 表演奇怪

javascript - Hook 到 Angular-CLI 生成的应用程序的引导过程

html - 几行内相同高度的行内 block 元素

javascript - Html5 和 CSS 不固定附件的背景视频

css - 背景放大动画

jquery - 根据鼠标输入方向使用 CSS3 定向翻转图 block ,同时还使用切换开关进行默认翻转

javascript - Blob 和 Blobbuilder 或 Blobbuilder 在 android native 浏览器上的问题有什么区别

html - 从 CSS3 中心过渡 HTML 元素

javascript - Android浏览器-本地主机通信(手机微型网络服务器)