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

ionic-v1
1

Hello,

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.

2

Really nobody knows how can i solve it?

3

If you create a codepen reproducing the problem it makes it easier for people to help. I understand it only occurs on iOS but we can open the codepen on the device.

4

Whats broken about the popover, not sure I understand the issue.
But a codepen would be very helpful

5

I had same issue in modal views, for me the solution was this piece of css:

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

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

.platform-ios.platform-cordova:not(.fullscreen) .modal-wrapper .has-header {
top: 44px;
}
Changing modal-wrapper by popover should works.
I build a little test for it.
Before css hack:

11401dd40ec24d326316f31eedc3792448a6eabac8b69.png386×685

After css hack:

image
image.png386×685 15.3 KB

6

Hi,
I have an issue in ios when i run ionic app in simulator scss styles are not working.but it supports android.how can i fix this issue in ios,please help me i am new bie to ionic.

sorry for my bad English.