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 div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button).

The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged.

Here are some code snippets:

1. HTML: ...

   <div class="pin">
       <a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a>
       <div class="comment_wrapper">
           <div class="divider bottom_shadow"></div>
           <div class="comment">
               <!-- Content appended here -->
           </div>
           <div class="divider top_shadow" style="margin-top: 0"></div>
       </div>
   </div>
   
   <div class="pin"> ... </div>
   

2. CSS:

   .comment_wrapper {
       -webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out;
       position: relative;
       overflow: hidden;
       width: 100%;
       float: left;
       height: 0;
   }
   
   
   .comment {
       background: #f4eeee;
       margin-left: -10px;
       padding: 10px;
       height: 100%;
       width: 100%;
       float: left;
   }
   

3. Javascript (using jQuery):

   function showSheet(button, wrapper, height) {       
       // Animate the wrapper in.
       var css = wrapper.css({
           'height': height + 'px', 
           'overflow': 'visible',
           'margin-bottom': '20px',
           'margin-top': '10px'
       });
   
       button.addClass('pressed');
   }
   
   $('.comment_btn').click(function() {
       showSheet($(this), $(this).siblings('.comment_wrapper'), 150);
   });
   

4. Screenshots : http://imgur.com/nGcnS,btP3W

Here are the problems I encountered with Webkit Transforms that I can't quite figure out:

1. Webkit Transforms scale the children of the container, which is undesirable for what I'm trying to do. -webkit-transform: none applied to the children don't seem to reset this behavior.
2. Webkit Transforms don't move sibling elements. So, the .pin container after the one we're operating on doesn't move down automatically. This can be fixed manually, but it is a hassle.

Thanks a lot!

Solution

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%)'
});

Comments

[Justin Edmund]

Thanks a lot! Knowing this is pretty helpful. I'm pretty sure I'm going to reconsider this interaction, but for reference what do you mean by making it pop up from under the screen with transforms?

[methodofaction]

Edited the answer with example code, an example is the virtual keyboard that slides from the bottom of the screen.

[Timo Ernst]

If you use translate3d(0, 100%, 0) it's even faster because hardware acceleration will kick in :)