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

[ghost]

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?

[juanmafont]

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?

Same error here, Ionic 5 using android.
Fix was #16910 (comment)

[infacto]

Another workaround: Just place this in your component styles or wherever you want:

ion-content::part(scroll) {
  overscroll-behavior-y: unset;
}

It seems that the overscroll-behavior-y: contain of the <main class="inner-scroll scroll-y" part="scroll"> class .scroll-y is the problem.

---

Full Solution for Page (Header, Content)

In my case I have a page with ion-header and ion-content. And I only want to scroll the content, not the header too. In this case you have to this:

my.component.scss

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ion-content {
  overflow-y: auto;
  &::part(scroll) {
    overscroll-behavior-y: unset;
  }
}

Not yet fully tested what happens to this page component in other uses such as viewing it as normal page, modal, etc. In my case, however, it works great for the popover. Update: No problems yet with modals, etc.
But I hope for an official solution soon.

Ionic 5

[corysmc]

Thanks @infacto this solution worked well for me on ionic v5.2.3

[usanzadunje]

There is easier way just use scrollY="false" on ion-content of popover element.

Reference : https://www.youtube.com/watch?v=ZCrQjk6PdK0&t=275s

[liamdebeasi]

Hi everyone,

It looks like this was fixed in Ionic 5.9.2 but we missed this issue when merging the PR: #24294

I recommend updating to the latest version of Ionic to receive this fix. If you are still running into problems, please open a new issue. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.