List of hardware accelerated CSS properties for mobile safari

Question

I went across change logs of MobileSafari in iOS 6 where it states:

WebKit no longer always creates hardware-accelerated layers for elements with the -webkit-transform: preserve-3d option. Authors should stop using this option as a way to get hardware acceleration

Does there exist any list of hardware accelerated CSS properties ?

Answer 1

These aspects of your document can be accelerated by the GPU:

• General layout compositing
• CSS3 transitions
• CSS3 3D transforms
• Canvas Drawing
• WebGL 3D Drawing

More on this here http://www.html5rocks.com/en/tutorials/speed/html5/

Maybe this article will help toohttp://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

And this one http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Answer 2

Paul Lewis & Paul Irish have a really good article about High Performance Animations.

"We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps."

4 things a browser can animate cheaply

Position - transform: translate(n px, n px);

Scale - transform: scale(n);

Rotation - transform: rotate(n deg);

Opacity - opacity: 0..1;

TranslateZ() or Translate3D() may be required.

---

Source: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/