List of CSS CSS Hardware Accelerated Properties for Mobile Safari

Question

I looked at the MobileSafari change logs in iOS 6 where it says:

WebKit does not always create hardware accelerated layers for elements with the -webkit-transform: preserve-3d option. Authors should stop using this option as a way to accelerate hardware acceleration

Is there any list of hardware accelerated CSS properties?

Answer 1

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

• General layout layout
• CSS3 Transitions
• CSS3 3D Transforms
• Canvas drawing
• 3DGing WebGL

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

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

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

Answer 2

Paul Lewis and Paul Irish have a really good article on high-performance animations.

“Go straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation, and opacity. If you live anything else, at your own peril and risk, and the odds aren't you going to hit a silky smooth 60 frames in give me a sec".

4 things that a browser can animate cheaply

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

Scale - transformation: scale (n);

Rotation - Transformation: rotation (n deg);

Opacity - Opacity: 0..1;

TranslateZ () or Translate3D () may be required.

---

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