md-tabs long label names doesn't show arrow keys < >

[lllpsi]

With the latest stable version, using a simple code

<div>
  <md-content class="md-padding">
    <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}" md-center-tabs>
      <md-tab id="tab1">
        <md-tab-label>I31232131231311321321321321312321312temI31232131231311321321321321312321312temI31232131231311321321321321312321312temI31232131231311321321321321312321312tem One</md-tab-label>
        <md-tab-body>
          View for Item #1 <br>
          data.selectedIndex = 0;
        </md-tab-body>
      </md-tab>
      <md-tab id="tab2" ng-disabled="data.secondLocked">
        <md-tab-label>{{data.secondLabel}}</md-tab-label>
        <md-tab-body>
          View for Item #2 <br>
          data.selectedIndex = 1;
        </md-tab-body>
      </md-tab>
      <md-tab id="tab3">
        <md-tab-label>Item Three</md-tab-label>
        <md-tab-body>
          View for Item #3 <br>
          data.selectedIndex = 2;
        </md-tab-body>
      </md-tab>
    </md-tabs>
  </md-content>

  <div class="md-padding" layout="row" layout-sm="column" layout-align="left center" style="padding-top: 0;">
    <md-checkbox ng-model="data.secondLocked" aria-label="Disable item two?" style="margin: 5px;">
      Disable item two?
    </md-checkbox>
    <md-checkbox ng-model="data.bottom" aria-label="Align tabs to bottom?" style="margin: 5px;">
      Align tabs to bottom?
    </md-checkbox>
  </div>
</div>

When the window is resized to smaller screen, it doesn't show the arrow keys to navigate through the tabs. Also, the animation is messed up by fading in and fading out the entire tab control

Update: Broken in 0.10.0 but it's fixed in 0.9.0

[vishalkrv]

This issue still persists, can be seen in demo page as well. Add a new tab with a long name then try scrolling to first tab

[Splaktar]

@vishalkrv that issue is being tracked in #11689.