Twitter Bootstrap subnav closes instead of activat

Question

I've got the following nav on my site

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar pull-right" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="/"><span class="icon-chevron-up icon-medium"></span> Rocky Mountain Arts</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/Gallery" class="pjax">For Sale</a></li>
                            <li><a href="/Gallery/Sold" class="pjax">Sold</a></li>
                            <li><a href="/Gallery/PrivateCollection" class="pjax">Private Collection</a></li>
                        </ul>
                    </li>
                    <li><a href="/About" class="pjax">About The Artist</a></li>
                    <li><a href="/Contact" class="pjax">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

When I view the site on my desktop, I see everything as expected, and I can navigate all of the links.

HOWEVER: When I load the site up on my iPhone, press the toggle collapse button and then expand the dropdown, I cannot click any of the sub links within the dropdown menu, rather the menu closes and either the "about" or the "contact" link activate instead.

How can I fix this?

Answer 1

Thanks @MiikaL for the comment. Looks like it's a bug filed over at Github that no-one is really addressing in the official source code.

https://github.com/twitter/bootstrap/issues/4550

This can be reproduced on the github components demo page
http://twitter.github.com/bootstrap/components.html#buttonDropdowns

There are people with helpful info in the tread, and the 'hack' solution seems to be

// Fixes sub-nav not working as expected on IOS
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

Answer 2

This issue is finally fixed in the latest Twitter Bootstrap as of version 2.2.2:

You can read a short summary about the changelog in 2.2.2 here: http://forwebonly.com/things-you-should-know-about-twitter-bootstrap-2-2-2/