Ionic header in popover is not displayed correctly on ios (iPhone) platform

i have the following template for custom popover window:

<ion-popover-view class="customPopup">



  <ion-header-bar class="bar bar-header">
    <h1 class="title">Available sounds</h1>
  </ion-header-bar>

  <ion-tabs class="tabs-icon-only tabs-top tabs-positive">

    <ion-tab title="{{ 'SOUNDS' | translate }}">

      <ion-content class="has-header">
        <div class="item item-button-right" ng-repeat="sound in availableSounds">
          {{sound.name}}
          <button class="button button-positive" ng-click="addSoundToSelection({{$index}})">
            <i class="icon ion-plus-circled"></i>
          </button>
        </div>

        </div>


      </ion-content>

    </ion-tab>

    <ion-tab title="{{ 'PRE-PREPARED_MIX' | translate }}">

      <ion-content class="has-header">
        <div class="item item-button-right" ng-repeat="sound in availablePrepreparedSounds">
          {{sound.name}}
          <button class="button button-positive" ng-click="addSoundToSelection({{$index}})">
            <i class="icon ion-plus-circled"></i>
          </button>
        </div>
      </ion-content>

    </ion-tab>
  </ion-tabs>

</ion-popover-view>

It produces successful result on Browser and Android but on iOS emulator is result damaged (see image below).

enter image description here

How can i solve it please?

Many thanks for any advice.

To accommodate the transparent status bar in iOS 7+, Ionic's CSS pushes header bars down 20px. It seems like the Ionic team forgot that header bars exist in popovers as well. I suppose in the meantime you can override the style of your popovers' header bars with something similar to the style below.

.platform-ios.platform-cordova:not(.fullscreen) .popover .bar-header > * {
  margin-top: 0;
}

.platform-ios.platform-cordova:not(.fullscreen) .popover .bar-header {
  height: 44px;
}

.platform-ios.platform-cordova:not(.fullscreen) .popover .has-header {
  top: 44px;
}