Modal above popover - not clickable

Ionic Framework ionic-v3
1

Hi,
I think I found an issue when using popover together with modal dialogs opened from within the popover:
It works fine in chrome and on android, but on iOS, any dialog opened from a popover cannot be used (nor closed).

Reason:
When the popover gets opened, the “disable-scroll” class gets append to the ion-app tag. Then there is this css rule:

.disable-scroll .ion-page {
 pointer-events: none;
-ms-touch-action: none;
touch-action: none;
}

Because the modal dialog is also inside this ion-app tag, and contains the ion-page class, it is made unusable. Nothing is clickable (including close button). No way out on iOS. Somehow it still works on Android, not sure why.

Following code seems to solve it:

.disable-scroll .modal-wrapper .ion-page {
  pointer-events: all;
}

Did anybody else come across this issue?

2 Likes
2

Thank you for your solution! It worked!

2 Likes