Ionic 5 Modal over modal is missing ion-backdrop

Question

Why is my ion-backdrop + modal shadow styling not working when I open a modal on top of another modal?

PREFACE: This was working fine with V4, but broken on the upgrade to V5. I don’t want to change my page approach, just fix the CSS/whatever is actually causing the issue below.

• My app opens a modal page with custom css to make it full screen.

  I can then open another normal modal (but not full screen) over the top. This 2nd modal is missing the ion-backdrop and its border shadow styling.

  I can see the ion-backdrop is definitely in the DOM, but it’s obviously not showing.

Step1 Fine enter image description here

Step 2 - broken ion-backdrop: enter image description here

Showing my custom modal:

async showClipboard() {
    const modal = await this._ModalController.create({
      component: ClipboardPage,
      cssClass: 'custom-round-modal',
      componentProps: {
        user: this.user
      },
      showBackdrop: true
    });
    await modal.present(); 
  }

The CSS:

@media only screen and (min-width: 768px) {
  .custom-round-modal {
    .modal-wrapper {
      border-radius: 15px !important;
      -moz-border-radius: 15px !important;
      -webkit-border-radius: 15px !important;
      .ion-page {
        border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
      }
    }
  }
}

Reconnoiter

Answer 1

First off, I think you pasted the same screenshot twice by mistake. But I'm having the same issue, so I know what you mean.

It looks like Ionic 5 introduced this css for the modals:

.sc-ion-modal-ios-h:first-of-type {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

Which means when you show multiple modals at the same time, only the first one will get the backdrop.

A possible workaround is to add the backdrop yourself to your global css using something like this:

ion-modal {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

Or use the css class Ionic is using (but note that this one is iOS specific, so you'd likely need to do the same with the Android-equivalent class):

.sc-ion-modal-ios-h {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

NOTE: This will likely not look good if you are showing multiple modals on top of each other that are not fullscreen, since you'll be getting multiple backdrops on top of each other (so they'll get increasingly darker). But since your issue is a non-fullscreen modal on top of a fullscreen one, I think it will work in your case.

Hopefully the Ionic team will come up with a more elegant solution to this issue.

Terris

Sir, I bet you spent a bit of time finding this out :P thank you. – Mccune

your first workaround didn't work for me but the second one (adding the class "sc-ion-modal-md-h" for android works like a charm). Thanks – Undergo

Answer 2

This is addressed now in the Ionic Documentation. Please see under 'Customization' section for ion-modal : https://ionicframework.com/docs/api/modal

Add the following CSS to your modal class -

ion-modal.stack-modal {
  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}

Begotten

I tried it like in the docs, but it's still not working for me. Can you please give me a hint what else I've to do? I'm opening the modal with cssClass: 'stack-modal' right? – Sclerite

Answer 3

Thank you krisloekkegaard for your code, that helped me really out.

I want to add that it will only work if placed in the global sass or css files! You cannot do that from a component's style-file, because the modal will be created outside of it.

The following lines are a bit more precise, because they will activate the backdrop only on the last modal. Even if you have 10 stacked modals, there will be only the backdrop of the first and the backdrop of the last element overlaying each other.

.sc-ion-modal-md-h:last-of-type {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}

.sc-ion-modal-ios-h:last-of-type {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}

Carnes

Answer 4

I solved the issue by adding the following CSS into the "global.scss" file, in Ionic V7:

ion-modal.modal-default.show-modal:last-of-type {
    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4) !important;
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32) !important;
}

Philomenaphiloo

it actually worked for me in ionic 5 :D – Findley

Answer 5

I solved the issue adding the following css into variables.css file in Ionic v5. Give a chance.

.backdrop-no-scroll {
ion-router-outlet {
  background: white;
}

Overbalance

Answer 6

One more solution (Ionic 5):

ion-modal + ion-modal {
    --backdrop-opacity: var(--ion-backdrop-opacity) !important;
}

The other solutions did not work for me

Aeroscope