mobile devices css performance useful links

1. http://www.html5rocks.com/en/mobile/optimization-and-performance/


2. http://stackoverflow.com/questions/8126766/css3-performance-on-mobile-device

Edit: I've made this answer assuming you're animating with CSS3 transitions. If you aren't, and you can, you could possibly expect improved performance... It's worth a shot.

The issue here appears to be that webkit has to repaint two really heavy box-shadows. This doesn't seem like a big task, but if you removed the inset box-shadow to start with, I imagine you'd see a surprising performance jump up.

I've experienced boggy scrolling on my android device (Webkit based browser) and did this testing to determine what the issue was. Text-shadow was somewhat irrelevant in UI type settings. Gradients were also pretty inconsequential. Once I hit box-shadow, I noticed an almost linear progression in performance as I removed the blur radius pixel by pixel.

For example, a 6px radius may have taken 80ms to render on a large div. If I brought that down to 3px, rendering times were close to 40ms. 2px, around 20ms.

So you might want to hold back on the box-shadow and just use images if possible, otherwise just use a smaller shadow. Once you hit the point where webkit can repaint the UI at least 20 times in a second on a low end device, you are probably okay.

It may seem obvious. Since there's no option for quality of rendering (For example), you can't really optimize this beyond scaling back... For mobile devices, all you can really do is hold back on the effects and optimize your art work based on your restrictions.

Thx for the answer! What I found on Google, if you are adding -webkit-transform: translate3d(0, 0, 0); this to your element, you'll get a better performance. But that doesn't work for elements that are positioned absolute ... –  StijnH Nov 15 '11 at 7:27  That should enable gpu acceleration, which is about as efficient as the animation can get. I've been finding webkit is loaded with non intuitive performance... Features? It does strange things to optimize, but in certain conditions it's much slower than it seems like it should be. I'm pretty confused by the way it repaints the ui, primarily. I've favorited this question in case I come across anything though. I'd be interested to hear if you make progress! –  Steve Adams Nov 15 '11 at 8:06 The strange thing is also: if we test this on a iPhone 4, the animation is less smoother then on a 3G ... Keep you posted ! –  StijnH Nov 15 '11 at 9:33 @StijnH iPhone4 has a retina display so the CPU/GPU has to push 2x the pixels the 3G has to. That's why performance is bad on the iPhone4. If you try a 4s performance will be A LOT better. –  Timo Jan 11 '13 at 11:35

3. http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/