5

我在 iOS 6 中查看了 MobileSafari 的更改日志，其中指出：

WebKit 不再总是使用 -webkit-transform: preserve-3d 选项为元素创建硬件加速层。作者应该停止使用此选项作为获得硬件加速的一种方式

是否存在任何硬件加速 CSS 属性列表？

4

2 回答 2

11

GPU 可以加速文档的这些方面：

  • 总体布局合成
  • CSS3 过渡
  • CSS3 3D 变换
  • 画布绘图
  • WebGL 3D 绘图

更多关于这里http://www.html5rocks.com/en/tutorials/speed/html5/

也许这篇文章也会有所帮助http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

而这个http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

于 2013-04-24T07:16:06.590 回答
9

Paul Lewis 和 Paul Irish 有一篇关于高性能动画的非常好的文章。

“我们将直接切入正题。现代浏览器可以非常便宜地为四件事设置动画：位置、缩放、旋转和不透明度。如果你为其他任何东西设置动画，风险自负，而且你很可能不会去达到如丝般顺滑的 60fps。”

浏览器可以廉价制作动画的 4 件事

位置- 变换：translate( n px, n px);

比例 - 变换：比例（n）；

旋转- 变换：旋转（n度）；

不透明度- 不透明度：0..1；

可能需要 TranslateZ() 或 Translate3D()。

来源：http ://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

于 2013-12-17T11:59:19.757 回答