List of hardware accelerated CSS properties for mobile safari

css ios6 hardware-acceleration
bitsbuffer picture bitsbuffer · Apr 24, 2013 · Viewed 8.4k times · Source

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

alexcristea picture alexcristea · Apr 24, 2013

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/

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More