Bootstrap 3 Dropdown on iPad not working

Question

I have a simple Bootstrap 3 dropdown that is working in all browsers that I've tested (Chrome, FF, IE, Chrome on Android) but it is not working in Safari or Chrome on the iPad (ios 7.04).

I thought this was an issue with the ontouchstart as suggested in some other posts dealing with Bootstrap 2 but I've tried that with a local file and have had no success: Bootstrap Collapsed Menu Links Not Working on Mobile Devices

I also don't want a solution where I have to modify the original javascript file since we're currently pulling that from a CDN.

I created a simple snippet here to test: https://www.bootply.com/Bdzlt3G36C

Here's the original code that's in the bootply in case that link dies in the future:

<div class="col-sm-5 col-offset-2 top-buffer">   <div class="dropdown">       <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown">         Action     </a>     <ul class=" dropdown-menu" =""="" role="menu" aria-labelledby="ddaction">       <li role="presentation"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown>         Action     </a>     <ul class=" dropdown-menu"="" role="menu" aria-labelledby="ddaction">         </a><a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>       </li>    </ul></div> </div> 

Answer 1

I figured it out. I was missing the href="#" in my anchor tag. It was working fine in other browsers but not chrome or safari on IOS. Works fine now. Here's the final code for anyone that's interested:

  <div class="dropdown">       <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">         Action     </a>     <ul class="dropdown-menu" role="menu" aria-labelledby="ddaction">       <li role="presentation">         <a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>       </li>     </ul>   </div> 

And a working sample here: http://www.bootply.com/104147