Ionic 5: Modal over modal is missing ion-backdrop

@Daveshirman wrote:

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:

Screenshot 2020-05-14 at 13.16.381760×1012 301 KB

Step 2 - broken ion-backdrop:

Screenshot 2020-05-14 at 13.16.491760×1012 300 KB

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.

Posts: 1

Participants: 1

Read full topic