使用css3过渡进行幻灯片切换 - 不在移动设备上平滑

Question

HTML：

<div>
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
<button>Toggle Div</button>

的CSS：

div {
  overflow:hidden;
  max-height:0;
  width:200px;
 -webkit-transition:max-height linear .5s;
}

div.open {
  max-height:100px;
}

jQuery的：

$(function(){
   $('button').click(function(){
      $('div').toggleClass('open');
   });
});

jsbin

问题在于过渡不完全平滑。

我知道“转换”的转换与其他款式的转换之间存在差异。 我的问题是如何使用属性“transform”得到相同的结果？