Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

List of hardware accelerated CSS properties for mobile safari

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 ?

like image 217
bitsbuffer Avatar asked Apr 24 '13 07:04

bitsbuffer


2 Answers

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/

like image 104
alexcristea Avatar answered Oct 13 '22 20:10

alexcristea


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/

like image 41
Stoikerty Avatar answered Oct 13 '22 19:10

Stoikerty