弹出窗口中的离子标题在ios（iPhone）平台上无法正确显示

Question

我有自定义弹出窗口的以下模板：

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

它在浏览器和Android上产生成功的结果，但在iOS模拟器上会导致结果损坏（见下图）。

我该如何解决？

非常感谢您的任何建议。

Answer 1

为了适应iOS 7+中的透明状态栏，Ionic的CSS将标题栏按下20px。似乎Ionic团队忘记了弹出窗口中也存在标题栏。我想在此期间你可以使用类似于下面样式的东西覆盖你的popover'标题栏的样式。

.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;
}