title: slow .toggleSLide() on iPad 3
body: <p>I used <a href="http://twitter.github.com/bootstrap/" rel="nofollow">bootstrap</a> to build a site but then i noticed that when it gets to portrait mode on the ipad (3 in my case) the menu sliding gets really, really slow. If you <a href="http://twitter.github.com/bootstrap/" rel="nofollow">look at their site</a> on an ipad3 (portrait mode, not sure about the other ipads) you will see how slow and choppy the sub menu show is. It's fine on the iphone (I have an iphone 4s)</p>
  
  <p>So I thought of just build my own using a very simple <code>.toggleSLide()</code> and nothing, same thing. I even thougt of using <code>.show()</code> and <code>.hide()</code> but even in that case, the action is really slow.</p>
  
  <p>Eventually I used css animation which kinda solve it a little bit:</p>
  
  <pre><code>        $(".btn-navbar").click(function(){
              $(".nav-collapse .nav").toggleClass('show');
          });
  </code></pre>
  
  <p>and the css </p>
  
  <pre><code>.nav {
     height: 0;
  }
  
  .show{
     -webkit-transition: height 0.2s linear; 
      height:300px; 
      overflow:hidden; 
     -webkit-transform: translateZ(0);
  }
  </code></pre>
  
  <p>But on what tablet/mobile is that css animation supported?</p>
  
  <p>I think the issue has something to do with the <code>.children()</code> elements of the <code>.nav</code> when is showing.</p>
  
  <p>Basically lets take the <a href="http://twitter.github.com/bootstrap/" rel="nofollow">bootstrap site</a> and view it on an ipad3 potrait mode, how can we have a smooth sub menu show/hide on a click?</p>