ionic-framework: bug: Swiping up or down on unscrollable modal panel scrolls the page behind the modal panel

Bug Report

Ionic version:

[x] 4.2.0

Current behavior: When scrolling up or down on a non scrollable modal panel it scrolls the page in the background

Expected behavior: Touch events should not act on pages behind a full page element (modal panel in this case)

Steps to reproduce: Create a page with a list of items to scroll through Clicking on one of these items opens a modal panel Make up and down swipe gestures on this modal panel Close modal panel and notice the page in the background has been scrolled instead

Related code:

Our modal panel uses forceOverscroll false to prevent scrolling on the modal panel

<ion-content [forceOverscroll]="false">

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.0

Cordova:

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

System:

   Android SDK Tools : 26.1.1 (/Users/rh/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v8.11.4 (/Users/rh/.nvm/versions/node/v8.11.4/bin/node)
   npm               : 6.7.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2 Build version 10E125

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 29 (2 by maintainers)

Most upvoted comments

@Livijn This would make the modal scrollable again (not sure why the formatting goes weird)

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

ion-modal ion-content{
    --overflow: auto;
}

}

RHinderiks on Aug 15, 2019

Maybe this might works (not tested - put it in your global styles):

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

Keep in mind that you will probably block modal scroll as well if you are using ion-content there. But you can always force it back in modal.

rafalschmidt97 on Aug 15, 2019

Yeah sorry, didn’t think that through. Here’s how I solved it:

.backdrop-no-scroll {
  ion-content:not([scrollable]) {
    --overflow: hidden;
  }
}

And then per scrollable modal: <ion-content scrollable>.

Livijn on Aug 15, 2019

Desktop and Android works fine. The issue only appears on iOS browsers.

alexwolfwang on Apr 17, 2019

Thanks @rafalschmidt97! and @Livijn

Our case was a bit different in that we had a modal opening another modal that should be moveable (we used interactjs for that). The problem was that moving this above all modal was scrolling the content behind where actually the point of moving it was to be able to see areas behind.

Inspired by your fix, and since we had many modals that needed to scroll; we instead made sure that when we open our moveable modal we add a class to ion-app. we applied your css to that specific class in global.css. And when dismissing the modal we remove the class.

in Modal code ` public ngOnInit() { const ionApp = document.getElementsByTagName(“ion-app”) if (ionApp ) { const firstItem = ionApp.item(0) if (firstItem) { firstItem.classList.add(“disable-scroll”); console.log(‘Disabled scroll’) } } }

public ngOnDestroy() { const ionApp = document.getElementsByTagName(“ion-app”) if (ionApp ) { const firstItem = ionApp.item(0) if (firstItem && firstItem.classList.contains(“disable-scroll”)) { firstItem.classList.remove(“disable-scroll”); console.log(‘enabled scroll’) } } } `

and global.scss .disable-scroll { ion-content { --overflow: hidden; } }

lucas-t5 on Oct 29, 2019

@Livijn This would still cause the backdrop to scroll on your scrollable modals right?

RHinderiks on Aug 15, 2019

@rafalschmidt97 That really works.

alexwolfwang on Aug 2, 2019

@rafalschmidt97 Worked for me! Thanks! Indeed, I set your CSS on global scale and then override it on specific modals that i want to be scrollable.

anagstef on Aug 2, 2019