Bootstrap Nav-tabs fail for iPhone

Question

I'm using Bootstrap with an Ember project, and following markup produces navigation tabs that work on the desktop, but fail in Chrome & Safari the iPhone 6.

Here is the markup produced:

<nav>
  <ul class="nav nav-tabs">
    <li id="ember611" class="ember-view active">  
      <a>Tab 1</a>
    </li>
    <li id="ember612" class="ember-view">     
      <a>Tab 2</a>
    </li>
  </ul>
</nav>

Tapping on Tab 2 doesn't work. Any suggestions?

Here is the HtmlBars that produces this HTML:

<nav>
    <ul class="nav nav-tabs">
      {{#link-to "foo.bar.tab1" tagName="li" role="presentation"}}
          <a href={{view.href}}>Matches</a>
      {{/link-to}}
      {{#link-to "foo.bar.tab2" tagName="li" role="presentation"}}
          <a href={{view.href}}>Standings</a>
      {{/link-to}}
    </ul>
</nav>

I'm using Bootstrap 3.3.4, and Ember 1.3

Answer 1

You're using your li elements as links when they really shouldn't be. That will work in some browsers but it's non-standard. I usually do something like this:

{{#link-to 'foo.bar.tab1' tagName='li' href='false'}}
    {{link-to 'Matches' 'foo.bar.tab1' role='presentation'}}
{{/link-to}}

This will make the a tag the actual link (which will work across browsers), but will still add the active class to the li elements.