Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

kyleabenscommented, Mar 31, 2020

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

1reaction

liamdebeasicommented, Mar 17, 2020

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

Top Results From Across the Web

Bootstrap multiple modals modal-backdrop issue [duplicate]

I have a page where one Bootstrap modal opens another modal. The problem is that with each opened modal, it adds. <div class="modal-backdrop...

Snackbars - Material Design

DoSnackbar containers use a solid background color with a shadow to stand out against content. Longer snackbar on desktop. DoIn wide layouts, ...

ion-modal: Ionic Mobile App Custom Modal API Component

ion-modal is a dialog that appears on top of mobile app content, and must be dismissed before interaction resumes. Learn more about custom...

Framework7 Release Notes

modals : support unique backdrop for Popup, Sheet, Actions and Popover (df514dc) ... Android emulator on Windows as android (008bf32); react: display error...

https://miller-motte.ancoraed.com/Content/bootstra...

fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');\n}\n.glyphicon {\n position: relative;\n top: 1px;\n display: ...