Header items misaligned in Ionic View

ionic-v1
1

When testing my app in the browser using ionic serve, my app looks just fine:

image

However, when I push the app to Ionic View (on my iPhone), the header items are misaligned and overlap with the content:

image

What could cause such a problem?

My index.html file (redacted):

<ion-nav-bar class="bar bar-header bar-assertive">
  <ion-nav-buttons></ion-nav-buttons>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

My home.html file (redacted), which contains the header and container content:

<ion-view>
  <ion-nav-buttons>
    <button nav-direction="back" ui-sref="settings" class="button button-icon icon ion-gear-b"></button>
    <div class="h1 title logo-img"></div>
    <button class="button button-icon icon ion-person"></button>
  </ion-nav-buttons>

  <ion-content scrollbar-x="false" class="has-header has-footer">
    <div ng-repeat="post in homeCtrl.posts" class="list card">
      <!-- card contents in here -->
    </div>
  </ion-content>
  ...
</ion-view>