Header items misaligned in Ionic View


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

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

What could cause such a problem?

My index.html file (redacted):

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

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

    <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-content scrollbar-x="false" class="has-header has-footer">
    <div ng-repeat="post in homeCtrl.posts" class="list card">
      <!-- card contents in here -->