There are several references on the web about using the CSS3 translate3d directive to force hardware acceleration on some mobile devices (iPhone, etc). However while most of these go into great detail about translate3d none that I have found explain exactly how to use it. I therefore find myself wandering if I have implemented it correctly, since my animations are still a little stuttery. My questions are:
1: Do you apply it to the element (which is created dynamically) you are going to be animating (slide in’s, etc) or do you just apply it globally to the body element for instance?
2: Is it better to apply style rules to the element programatically when the element is being created dynamically, or is it better to create a css rule (a class for instance) and apply the rule to the element (Is there some form of precompilation that happens or performance gain?)
3: Are there any other tricks I can exploit to get a silky smooth user experience? Either quick wins or convoluted workarounds?
Thanks
1) I honestly have no idea 😛 I’d go for applying transitions to the element only.
2) It’s faster to change classes instead of applying style rules.
Source: http://www.quirksmode.org/dom/classchange.html
Also, you keep style and behavior separated. Most recent versions of Desktop Opera behave like other browsers as well. I have no idea about mobile browsers though.
3) For technical optimizations check yslow and pagespeed firefox addons. There is a compilation of most recommendations here: http://developer.yahoo.com/performance/rules.html