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 ([email protected])
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
RHinderiks
All 27 comments
same problem to me. I'm using ngif to switch the different content to display in the modal. The scroll function is correct in the first modal. But the scroll function is incorrect in the second modal. The content cannot be scrolled in the modal, but the background page is scrolled.
alexwolfwang
on 8 Apr 2019
What platforms are you experiencing this issue on? iOS? Android? Specific desktop/mobile web browsers?
KevinKelchen
on 17 Apr 2019
Desktop and Android works fine. The issue only appears on iOS browsers.
alexwolfwang
on 17 Apr 2019
Same here. Just noticing this issue.
Searching online so far I've come across a similar issue but specifically relating to the <html> and <body> elements. See here, here, and here.
I also see this issue and this issue which are not specific to those elements and may be more pertinent to the issue at hand.
11712 seems like the same issue. Although it's implied in the issue that WKWebView could fix the problem, I'm using WKWebView and it's still a problem. 馃槙
KevinKelchen
on 17 Apr 2019
There is another issue of scrolling that the ion-content cannot be scrolled after you closed a modal which above it.
alexwolfwang
on 17 Apr 2019
Is there any news on this issue?
RHinderiks
on 6 May 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 18 Jul 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 2 Aug 2019
@rafalschmidt97 That really works.
alexwolfwang
on 2 Aug 2019
Setting --overflow: hidden; on the modal's ion-content does work, however when a user scrolls on the modal, it instead scrolls the content behind that modal.
Livijn
on 15 Aug 2019
Setting
--overflow: hidden;on the modal'sion-contentdoes work, however when a user scrolls on the modal, it instead scrolls the content behind that modal.
You have to put it in globals instead of component styles. Because it just blocks every single ion-content scrolls 馃槄 I'm aware that it's not perfect solution.
rafalschmidt97
on 15 Aug 2019
And how would I handle cases where the modal should be able to scroll?
Livijn
on 15 Aug 2019
@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 15 Aug 2019
And how would I handle cases where the modal should be able to scroll?
As I said above you have to force it back 馃槀
rafalschmidt97
on 15 Aug 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 15 Aug 2019
@Livijn This would still cause the backdrop to scroll on your scrollable modals right?
RHinderiks
on 15 Aug 2019
@Livijn This would still cause the backdrop to scroll on your scrollable modals right?
Yes, it inherits the default scroll behaviour of an <ion-content>.
Livijn
on 15 Aug 2019
@Livijn But you don't want the backdrop to scroll underneath you modal panel (which is what the bug is)
RHinderiks
on 15 Aug 2019
@Livijn But you don't want the backdrop to scroll underneath you modal panel (which is what the bug is)
If you are wondering if the parent of the modal also scrolls when scrolling the modal, then no. When scrolling the modal's <ion-content>, it doesn't propagate down to the parent.
Livijn
on 15 Aug 2019
@Livijn But your fix is only applied to modals without Scrollable, wouldn't the models with scrollable still scroll their parent?
RHinderiks
on 15 Aug 2019
@Livijn But your fix is only applied to modals without Scrollable, wouldn't the models with scrollable still scroll their parent?
No, they don't do that by default either. I am using @ionic/vue though, but should be the same.
Livijn
on 15 Aug 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;
}
}
haredev
on 29 Oct 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.
thanks man works fine for me
vimalnallasamy
on 5 Dec 2019
This is occurring for our users again even without modals open. Usually when the keyboard is open this can be reproduced easily by trying to scroll past the beginning or end of the page. The scroll bounce will occur on the root page itself and "lock" scrolling interactions for a few seconds.
Has anyone else had this occur without modals?
lincolnthree
on 3 Jun 2020
Disregard, I believe this is a different issue. I misunderstood.
lincolnthree
on 3 Jun 2020
@liamdebeasi Can Ionic team fix this issue? It happens on Ionic 5 as well.
feng-xiao
on 28 Oct 2020
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.
this solution works but it brings in another known problem in iOS, the update of overflow will trigger the update of -webkit-overflow-scrolling, this causes a visible flash/flickering
HenokG
on 2 Dec 2020
Related issues
wonderdogone
路
121Comments
marcovtwout
路
76Comments
vonovak
路
66Comments
pavimus
路
90Comments
tonyawad88
路
100Comments
Most helpful comment
Maybe this might works (not tested - put it in your global styles):
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.