Ionic-framework: bug: pushing multiple modals on android tablet view leads to overlapping backdrop background color

[DwieDima]

Bug Report

Ionic version:


[x] 5.0.5

Current behavior:

if i open several modals in a row without closing them, the background gets darker and darker on android tablet view.

• current behavior

Expected behavior:

no matter how many modal windows are open, the background should always have the same backdrop opacity.

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.2.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0-dev.202003171655.3514dd8
   @angular-devkit/build-angular : 0.900.5
   @angular-devkit/schematics    : 9.0.5
   @angular/cli                  : 9.0.5
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.16.0 (/usr/local/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue? 5.1.0-dev.202003171827.3514dd8

[DwieDima]

Works!

[liamdebeasi]

Glad to hear it works! I am going to keep this issue open until I can merge the PR in.

[liamdebeasi]

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

[kyleabens]

@liamdebeasi It would be nice to enable the stacking of a modals backdrop when needed because in some cases modals can be different sizes. In my case I use a modal which contains a calendar that extends to 90vw and 90vh on desktop. Within this modal I can open a standard sized modal and now because there is no backdrop separating the two it blends in and looks odd.

[liamdebeasi]

@kyleabens We changed this behavior to better match the iOS and MD specs. If you would like to override this behavior, you can do so by setting the --backdrop-opacity CSS Variable on ion-modal to get the backdrops to stack. See https://ionicframework.com/docs/api/modal#css-custom-properties for more information.

[kyleabens]

@liamdebeasi I was just in the process of mentioning this after digging a little deeper. For everyone else who may want to know...I added a cssClass to the modal to target the ion-backdrop and applied --backdrop-opacity: 0.3; and it works perfectly now. Thanks!

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