v4:modal backdrop always hidden even if showBackdrop is true

[favrio]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.0.5 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.5
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : not available

System:

   ios-deploy : 1.9.2
   ios-sim    : 6.1.3
   NodeJS     : v8.9.4 (/usr/local/bin/node)
   npm        : 5.6.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Environment:

   ANDROID_HOME : not set

Describe the Bug
I create a modal with showBackdrop from ModalController, but the backdrop is always hidden.Check the dom tree, I find out there is a display: none on this component.

@media not all and (min-height: 600px) and (min-width: 768px)
<style>…</style>
ion-modal ion-backdrop {
    display: none;
}

Steps to Reproduce
Steps to reproduce the behavior:

1. Create any modal.
2. Check the backdrop style.

Expected Behavior
If we set the showBackdrop, the backdrop should be visible.

[cthos]

Seeing this media query coming from...somewhere.

@media not all and (min-height: 600px) and (min-width: 768px)
ion-modal ion-backdrop {
    display: none;
}

Also related to #10224?

[jameskane05]

Yeah, I'm getting that CSS rule by default, as well. Seems misplaced. This override in global.scss fixed it:

ion-modal {
	ion-backdrop {
		@media not all and (min-height: 600px) and (min-width: 768px) {
			display: unset;
		}
	}
}

But obviously a manual override is not ideal.

Also noticing - I can't edit the opacity of the modal backdrop. It's stuck on .4 because something is setting that style in-line on the element, so none of my .scss changes affect it. Any help there would be great.

[philmerrell]

Not sure if this is related but I also noticed the backdropDismiss is being ignored, even when the backdrop is displayed. My use case is using a modal similar to an actionsheet, but with more UI instead of buttons. This is handy for payment functionality and keeping UI close to the thumbs.

[incNick]

I have use ion-card in my modal window also happen same issue and found them below:

1 ion-backdrop: @media not all and (min-height: 600px) and (min-width: 768px) {display: none;} , remove the display:none attribute then backdrop appear, but click it nothing happen, should be still other js issue.
2 after backdrop tag, the div[role=dialog].modal-wrapper should be remove height 100% and contain: strict, then add position: absolute; top: 0; else the dialog div always overwrite the backdrop. (After this step should be only can see the backdrop)
3 the custome element tag (like <app-my-component>) should be remove class 'ion-page', then everything looks ok.

[manucorporat]

Fixed in master by 235c685!

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