List in ion-content is not scrolling correctly on iOS

Ionic Framework
1

Hi,

i have an ion-list inside an ion-content on a page which is used in a popover. Everything works fine on Android and in Safari when using ionic serve but on iOS (simulator and actual device) the content cannot be scrolled when the list is longer. If you try to scroll, it only “bounces” back.

I already tried everything I found in the forum and on the net, nothing helped.
iOS is Version 12.4.

Here’s the relevant code snippets:
page.html:

<ion-content padding no-bounce overflow-scroll="true" scroll="true">
    <p class="bold">{{'NOTIFICATIONS_AND_NEWS'|translate}}</p>
    <ion-list>
        <div *ngFor="let aNews of news">
            <ion-item *ngIf="aNews.deleted==false">
                    <ion-label text-wrap class="ion-margin-top" [style.font-weight]="aNews.read==true ? 'normal': 'bold'">{{aNews.title_de}}
                        <span style="position: absolute; right:0px;"><ion-icon name="close-circle" (click)="deleteClicked(aNews);"></ion-icon></span>
                    </ion-label>
                    <ion-note [style.font-weight]="aNews.read==true ? 'normal': 'bold'">{{aNews.text_de}}</ion-note>
                    <div class="gap"></div>
              </ion-item>
          </div>
    </ion-list>
</ion-content>

popover opened from tab1.page.ts;

async newsClicked(ev: any) {
    const popover = await this.popoverController.create({
      component: NewsPage,
      event: ev,
      translucent: false,
      cssClass: 'newspopover'
    });

    popover.onDidDismiss().then(() => { this.markNewsAsRead(); });

    return await popover.present();
  }

css class “newspopover” in global.scss:

.newspopover {
  --min-width: 80%;
  --max-width: 95%;
  overflow-y: scroll!important;
  -webkit-overflow-scrolling: touch;
}

Ionic info is:

Ionic:

   Ionic CLI                     : 5.2.7 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 6 other plugins)

Utility:

   cordova-res : 0.3.0 (update available: 0.6.0)
   native-run  : 0.2.1 (update available: 0.2.8)

System:

   Android SDK Tools : 26.1.1 (/Users/alexander/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.10.3
   OS                : macOS Mojave
   Xcode             : Xcode 10.3 Build version 10G8

Any help is greatly appreciated. Thanks!

2

Try to put below css in the app.scss file and check it’s working or not:

ion-app.platform-ios12 ion-content { pointer-events: auto; }

3

I already have this line in my .scss, does not work.

4

Okk not an issue but it’s worked for me after add above line.