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 -->