My Tabs are stacking incorrectly when deployed to a device

My tabs are coming out overlaying each other when I deploy on my device. The problem doesn’t occur in my computer browser. Please see the image below

The HTML is as follows:

<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">


  <!-- Form Tab -->
  <ion-tab title="Forms" icon="icon ion-document" href="#/offline/2/form">
    <ion-nav-view name="form-tab"></ion-nav-view>
  </ion-tab>

  <!-- Scan Tab -->
  <ion-tab title="Scan" icon="icon ion-camera" href="#/offline/3/scan">
    <ion-nav-view name="scan-tab"></ion-nav-view>
  </ion-tab>

  <!-- Sign Tab -->
  <ion-tab title="Sign" icon="icon ion-compose" href="#/offline/3/sign">
    <ion-nav-view name="sign-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

If anyone has any suggestions, please let me know!

Regards,

Chris

Just curious, is this with 1.0 beta? If so, try changing tabs-style and tabs-type to classes.

From

tabs-style="tabs-icon-top" tabs-type="tabs-default"

To

class="tabs-icon-top tabs-default"

I am using v0.9.27. Does that make a difference?
edit: I tried changing to your suggestion anyway but the same result.

Well since moving to 1.0 beta, theres a been a lot of api changes and fixes. Try upgrade to 1.0 and see if your situation is resolved.

Unfortunately that didn’t help either. I’m going to remove it all, start from scratch with the 1.0 docs and see what happens.

It might be work mentioning that I am using the tab in an abstract state:

// setup an abstract state for the tabs directive
  .state('tab', {
    url: '/offline/:id',
    abstract: true,
    templateUrl: 'views/formtab.html'
  })

  //Form details route
  .state('tab.form-detail', {
    url: '/form',
    views: {
      'form-tab': {
        templateUrl: 'views/form.html',
        controller: 'FormCtrl'
      }
    }
  })

  //Scan route
  .state('tab.scan', {
    url: '/scan',
    views: {
      'scan-tab': {
        templateUrl: 'views/scan.html',
        controller: 'ScanCtrl'
      }
    }
  })

  //Sign route
  .state('tab.sign', {
    url: '/sign',
    views: {
      'sign-tab': {
        templateUrl: 'views/sign.html',
        controller: 'SignCtrl'
      }
    }
  })