Scroll content + scroll popover doesn't work properly

Bug Report

Ionic version: [x] 4.0.0-rc.0

Current behavior: I have a long list in my root component (HomeComponent) which each has a button to open a popover to choose a category. Problem is, if I use ion-content for the PopoverComponent (CategoryPicker), the popover can’t be scrolled anymore. If I don’t wrap the PopoverComponents HTML code in ion-content, I can scroll the Popover, but if I try to overscroll in the popover, the background gets scrolled.

Expected behavior: Popover open -> ONLY Popover should be scrollable, not the background or anything else

Steps to reproduce:

• Create a Base Page with a long ion-list that forces you to scroll
• Add a button to each list item that opens a popover
• The popover should have a long list that forces you to scroll, too
• Try to wrap the popover components in ion-content -> Popover overscrolls but doesn’t really scroll down/up to see other entries
• Try to remove ion-content -> Popover scrolls, but if you overscroll inside the popover, the list in the base page is being scrolled

Related code: Fab Button to open Category Picker

      <ion-fab-button size="small" color="medium" style="margin-top: 10px;" (click)="category(entry._id, $event)"
                      [disabled]="expense || income">
        <ion-icon [name]="data.getCategory(entry.category).icon || 'add'"></ion-icon>
      </ion-fab-button>

Method that creates and present Category Picker

  async category(id: string, ev) {
    const popover = await this.popover.create({
      component: CategoryPickerPage,
      componentProps: {id: id},
      translucent: true,
      keyboardClose: true,
      event: ev,
      showBackdrop: true
    });
    popover.present();
  }

Actual CategoryPicker Component (Commented out ion-content, it can be tried with or without it)

<!--<ion-content>-->
    <ion-list lines="none">
      <ion-item *ngFor="let category of Category.categories" (click)="pick(category.id)" lines="none">
        <ion-icon slot="start" [name]="category.icon"></ion-icon>
        <ion-label>{{category.name}}</ion-label>
      </ion-item>

      <ion-item (click)="pick('none')" lines="none">
        <ion-icon slot="start" name="add"></ion-icon>
        <ion-label>Keine Kategorie</ion-label>
      </ion-item>
    </ion-list>
<!--</ion-content>-->

Other information: I’ve made 2 videos. This one shows the behavior with <ion-content> wrapper: http://zeriouh.io/shared/withcontent.TRIM.mp4

This is the behavior without <ion-content> wrapper: http://zeriouh.io/shared/withoutcontent.TRIM.mp4

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 4 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 7.0.0
   NodeJS     : v10.0.0 (/usr/local/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[chriswep]

as a temporary workaround, i could make this work by adding this global css:

.backdrop-no-scroll ion-content {
    --overflow: hidden;
}

Since Ionic is already adding the backdrop-no-scroll class to the body, it feels like they just forgot to implement the no-scroll part of it?

[foochuanyue]

facing the same issue +1