Ionic-framework: bug: Menu can be opened behind Modal with custom Animation

[EinfachHans]

Bug Report

Ionic version:


[x] 5.x

Current behavior:

I opened the Issue #20467 some time ago, because i was able to open the Side Menu via Gesture behind a Modal. This was fixed, but i just noticed that it still works for Modals which opens with a custom Animation.

I open a Modal with a own Fade-In Effect and while this Modal is open i can swipe the Menu in, which can be seen after the Modal is dismissed.

Expected behavior:

The Menu should generally not be possible to open when a Modal is open.

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.2.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.5
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 53 other plugins)

Utility:

   cordova-res : 0.10.0
   native-run  : 0.3.0

System:

   Android SDK Tools : 25.2.3 (/Users/hanskrywalsky/Library/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v12.16.1 (/usr/local/bin/node)
   npm               : 6.14.3
   OS                : macOS Catalina
   Xcode             : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[EinfachHans]

Of course:
https://github.com/HansKrywaa/ionic-modal-issue

Just open the Modal and swipe from left to open the Menu, then dismiss 😊

--> In the same Moment, when you have the time, can you check why my FadeOutAnimation isn't working? FadeIn works.

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The built in modals use a show-modal class to indicate that they are "presented". You will need to do the same with your custom animations.

Also, your fade out animation needs to account for the translate you added in your fade in.

I recommend you either use

.beforeStyles({
  transform: transformValue
})

on your fade in animation, or set the transform value using CSS. Thanks!

[EinfachHans]

thank you very much!

[liamdebeasi]

Actually I changed my mind. It's not a bug, but Ionic Framework should probably add the show-modal class regardless of the animation on the modal. I'll re-open and create a PR for this. 😄

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20833 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot[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.