Как плавно анимировать высоту в CSS или Javascript на мобильных устройствах

Я разрабатываю веб-приложение HTML5 для мобильных устройств и столкнулся с небольшими проблемами с плавной анимацией.

По сути, когда пользователь нажимает кнопку, ящик (div с высотой 0 пикселей) должен анимироваться до заданной высоты (в пикселях), и содержимое будет добавлено в этот ящик. Если у вас есть учетная запись Pinterest, вы можете увидеть анимацию в том виде, в каком она сейчас, на http://m.pinterest.com (нажмите кнопку «Комментарий» или «Репин»).

К сожалению, проблема заключается в том, что на мобильных устройствах Webkit Transitions не поддерживает аппаратное ускорение свойства height, поэтому он очень медленный, а анимация неровная.

Вот несколько фрагментов кода:

1. HTML : ...

    
    
     Комментарий  
    
    
    
    
    { {1}} 
    
     
    
    
   стиль 
    
    
    
    
    
    
    
    
   . .. 
    
    

2. CSS :

    .comment_wrapper {
    -webkit-transition: все 0,4 с, легкость выхода, высота 0,4 с, вставка -out; 
   позиция: относительная; 
   overflow: hidden; 
   width: 100%; 
   float: left; 
   height: 0; { {1}}} 
    
    
   .комментарий {
   background: # f4eeee; 
   margin-left: -10px; 
   padding: 10px; 
   height: 100%; 
   width: 100%; 
   float: left; 
   } 
    

3. Javascript (с использованием jQuery):

    function showSheet (кнопка, оболочка, высота) {{{ 1}} // Анимируем оболочку в. 
   var css = wrapper.css ({
    'height': height + 'px', 
    'overflow': 'visible' , 
    'margin-bottom': '20px', 
    'margin-top': '10px' 
   }); кнопка 
    
   . addClass ('Press'); 
   } 
    
    $ ('. comment_btn'). click (function () {
   showSheet ($ (this), $ (this) .siblings ('. comment_wrapper'), 150); 
   }); 
    

4. Скриншоты : http://imgur.com/nGcnS,btP3W

Вот проблемы, с которыми я столкнулся с Webkit Transforms, которые я не могу понять:

1. Webkit Transforms масштабирует дочерние элементы контейнера, что нежелательно для того, что я пытаюсь сделать. -webkit-transform: none , примененный к дочерним элементам, похоже, не сбрасывает это поведение.
2. Webkit Transforms не перемещает родственные элементы. Таким образом, контейнер .pin после того, с которым мы работаем, не опускается автоматически. Это можно исправить вручную, но это хлопотно.

Большое спасибо!