Ionic 5: Modal over modal is missing ion-backdrop

Q) 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.

  1. My app opens a modal page with custom css to make it full screen.
  2. 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.

Step 1 looks fine:

Step 2 - broken ion-backdrop:

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;
      }
    }
  }
}

Thanks.