How to smoothly animate height in CSS or Javascript on mobile devices

Question

I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations.

Essentially, when a user taps a button, a drawer (a di

Answer 1

With mobile phones being so fast it's easy to forget they are actually pretty humble devices when you compare them to desktop hardware. The reason why your page is slow it because of rendering reflows:

http://code.google.com/speed/articles/reflow.html

When the div grows, it has to push and recalculate the positions of all the elements, which is expensive to a mobile device.

I know it's a compromise, but the only way you can make the animation smoother is by putting position: absolute on .comment_wrapper; or if you really want butter smooth animation, make it pop up from under the screen with css transforms, i.e.

.comment_wrapper {
  height: 200px;
  position: absolute;
  width: 100%;
  bottom: 0;
  -webkit-transform: translate(0, 100%);
}


var css = wrapper.css({
    '-webkit-transform': 'translate(0, 100%)'
});

Answer 2

You want traslate3d. Should use the GPU if the device supports it.

check this out...

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