Ionic-framework: Scroll content + scroll popover doesn't work properly

[xyassini]

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 wrapper:
http://zeriouh.io/shared/withcontent.TRIM.mp4

This is the behavior without 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 ([email protected])
   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

[foochuanyue]

facing the same issue +1

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

[sneko]

Also facing this issue 👍

[Maraaghib]

My solution can be found here => https://stackoverflow.com/a/46597455
It may help you

[sneko]

@Maraaghib I need to give it a try :)

@chriswep the main issue I had with your solution is that I was not anymore able to scroll in my opened modals. I could have removed the ion-content tag from them but it doesn't catch the scroll in this case.

A little "workaround" I wrote is:

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

This rules do not hide the overflow on element appearing with a backdrop. That's still a hack so I'm not totally satisfied... any idea from the core team please? @brandyscarney ?

[MilotH2]

i have the same issue, i have not found any fix yet, it happens only on iOS, please check my post on ionic forum:
https://forum.ionicframework.com/t/popover-alertsheet-etc-on-ios-scrolls-back-content-and-not-the-popover-itself/180122

[dani-digital]

We're facing the same issue, with Ionic v5. We integrated the workaround with global class and overflow. Is there any update available regarding this issue?