CSS3 Translate3D 和 iPhone 硬件加速

标签 css mobile web-applications hardware-acceleration

有几个references在网上关于使用 CSS3 translate3d 指令在某些移动设备(iPhone 等)上强制硬件加速。然而,虽然其中大部分都详细介绍了 translate3d,但我发现没有一个能准确解释如何使用它。因此,如果我正确地实现了它,我会发现自己在徘徊,因为我的动画仍然有点卡顿。我的问题是:

1:您是将它应用到您要设置动画(滑入等)的元素(动态创建的),还是仅将它全局应用到 body 元素?

2:在动态创建元素时以编程方式将样式规则应用于元素更好,还是创建 css 规则(例如类)并将规则应用于元素更好(是否有一些发生的预编译形式或性能提升?)

3:我可以利用任何其他技巧来获得丝般流畅的用户体验吗?是速效还是复杂的解决方法?

谢谢

最佳答案

-webkit-transform: translate3d(0, 0, 0);

如果将此 css 属性应用于任何元素,它会强制设备使用硬件加速。我已经应用它来解决 Ipad2 上的渲染问题,例如“空白”

我说过应用这个对设备来说真的很重,所以,你可以让你的应用程序崩溃。 我的建议;如果您将此技巧应用于少数元素,请使用此技巧。

http://davidwalsh.name/translate3d

关于CSS3 Translate3D 和 iPhone 硬件加速,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6644491/

相关文章:

performance - 如何决定部署 Web 应用程序的硬件

javascript - 使用 ecmascript 更改内联 SVG 的 x 和 y

ios - 如何检查 iOS 中的 "Use Mobile Data"设置?

jquery - 防止无滚动按钮返回页面顶部

ssl - 证书链中中间证书的用途是什么?

maven - 使用 Maven 3 设置 Struts2 EAR 项目

javascript - 流畅的动画

html - 将 div 放在 div 之上,底部垂直对齐

html - 页面内容进入另一个位于页脚上的 div

javascript - 使用媒体查询仅包含移动设备上的 JS 文件