Search code examples
htmlcssiphone-4hardware-acceleration

HTML5: Is iPhone4's hardware acceleration that much weaker than compared to the 4s?

I created a HTML5 web application that uses hardware acceleration via CSS3 property translateZ(0).

On my 4s every works really very smooth.

When I test the same thing on a iPhone4, then performance goes down extremely. Almost unusable.

Is there some kind of freaky trick to enable hardware acceleration for the iPhone4? Or is its GPU simply that weak?

Solution

  • It came out that I've been doing hardware-accelerated transitions the wrong way, see:

    What are the "golden rules" to increase CSS3 transition performance on mobile devices?

    Using translate3d(x, y, z) instead of translateZ(0) with left:x did the trick for me. Now even on older iPhones all transitions run very smoothly.