Question

I used bootstrap 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 look at their site 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)

So I thought of just build my own using a very simple .toggleSLide() and nothing, same thing. I even thougt of using .show() and .hide() but even in that case, the action is really slow.

Eventually I used css animation which kinda solve it a little bit:

        $(".btn-navbar").click(function(){
            $(".nav-collapse .nav").toggleClass('show');
        });

and the css

.nav {
   height: 0;
}

.show{
   -webkit-transition: height 0.2s linear; 
    height:300px; 
    overflow:hidden; 
   -webkit-transform: translateZ(0);
}

But on what tablet/mobile is that css animation supported?

I think the issue has something to do with the .children() elements of the .nav when is showing.

Basically lets take the bootstrap site and view it on an ipad3 potrait mode, how can we have a smooth sub menu show/hide on a click?

Answer 1

Duh! I Ended up using this plugin:

https://github.com/ftlabs/fastclick

But issues stated above remains.