移动safari的硬件加速CSS属性列表

Question

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

  

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

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

Answer 1

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/

Answer 2

保罗路易斯＆amp; Paul Irish有一篇关于高性能动画的非常好的文章。

  

“我们将直接切入追逐。现代浏览器可以非常便宜地制作四件事物：位置，比例，旋转和不透明度。如果你动画其他任何东西，那将由你自己承担风险，而且你有可能”再也不会打到丝般顺畅的60fps 。“

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

位置 - 转换：翻译（ n px， n px）;

比例 - 转换：比例（ n ）;

旋转 - 转换：旋转（ n 度）;

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

可能需要TranslateZ（）或Translate3D（）。

---

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