Ionic 3: unable to scroll popover content in iOS

Ionic Framework ionic-v3
1

I have a page that can be displayed properly as a single page. However, when I show it using Popover controller, its content cannot be scrolled on iOS 11.2. On Android, the popover works fine.

Here is my ionic info (by running ionic info)

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.5
Node              : v8.10.0
npm               : 5.6.0 
OS                : macOS Sierra

Here is my code:

showRoutes(event) {
    let popover = this.popoverCtrl.create(MyPage, {});
    popover.present({
      ev: event
    });
  }

This is MyPage html:

<ion-header>
  <ion-navbar>
    <ion-title>Routes</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <div ion-item class="list-header">
      <div>Location</div>
      <div class="item-note" item-right>Distance (miles)</div>
    </div>
    <button ion-item *ngFor="let item of evacuationPoints">
      <div>{{item.title}}</div>
      <div class="item-note" item-right>{{item.distance}}</div>
    </button>
  </ion-list>
</ion-content>

Does any one have the same problem and know how to fix? if this cannot be fixed, then Popover is useless. In the screenshot below, the list is hidden and unable to scroll up 0n iOS only.

IMG_0013-1

1 Like