bug: Menu can be opened behind Modal with custom Animation

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 (cordova-lib@9.0.1)
   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]

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. 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!