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 : https://i.stack.imgur.com/WnGpU.png

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!

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