移动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

关于高性能动画的保罗刘易斯和保罗爱尔兰有一篇非常好的文章.

"我们将直接切入追逐.现代浏览器可以非常便宜地制作四件事物:位置,比例,旋转和不透明度.如果你动画其他任何东西,那将由你自己承担风险,你有可能不去打出丝般顺畅的60fps."

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

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

比例 - 变换:比例(n);

旋转 - 变换:旋转(n度);

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

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

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