Cannot dismiss a modal by clicking the backdrop (ionic 6)

Ionic Framework
1

I migrated to ionic 6 recently and now I am unable to dismiss a modal by clicking the backdrop.

I find that the click is being blocked by this one element inside the ion-modal’s shadow DOM:
<div class="modal-shadow" style="opacity: 1;"></div>

In the inspector, I can solve this issue by adding display: none to the element above. However, in practice this wont work because the element isn’t accessible due to it being shadow DOM and not having a “part” property.

Any idea how I can make this work again?

Note:
I made sure that when I created the modal I added backdropDismiss: true. That should not be the problem.

2

Not sure why but I solved it by adding “--height: auto;” to ion-modal’s css. This dismissed the modal-shadow :sweat_smile:

not very intuitive

3

can you please post both TS code and CSS code please, I was also facing the same issue in IOS and my code is

this.presentModel = await this.modalCtrl.create({
          component: ProfileModelPage,
          cssClass: 'custom-modal profile-modal',
          backdropDismiss: true
        });
        this.presentModel.onWillDismiss().then((data) => {
          this.isModalOpened = false;
        });
        this.presentModel.present().then(() => {
          this.isModalOpened = true;
        });

CSS is like

.profile-modal {
    --height: 0;
    --width: 0;
}
.custom-modal::part(content),
.custom-modal .modal-wrapper {
    position: fixed !important;
    top: 45% !important;
    right: 5% !important;
    --width: 60% !important;
    --height: 35% !important;
    --border-radius: 6.2px !important;
    height: 45% !important;
    box-shadow: 0px 0px 5px #58595b !important;
}

This is working fine in android but I was having issue in IOS only

4

I was able to get this to work by setting the width and height on the custom class. “–height: auto;” as mentioned in the solution just made my modal disappear. Originally I was adding padding to get the modal to be smaller than the screen width/height, but the modal-shadow wouldn’t allow me to dismiss when I did that.

.custom-ion-modal {
  --width: calc(100% - 40px);
  --height: calc(100% - 100px);
}
5

same here on ionic6.1.13 - web and android backdropdismiss on every pixel up until the ion-modal div, but ios doesn’t dismiss even when clicking in the app corners far away from the div. Solution was to add to the general variables.scss that --height:auto; to the ion-modal general class.

Selecting cssClass with this: (angular)

 const modal = await this.modalController.create({
      component: WarehouseSelectorModalComponent,
      cssClass: 'warehouseSelectModal',

CSS:

// strangeness: without this line, ios won-t backdropdismiss
.numberEntryModal {
 --height:auto;
}

.numberEntryModal::part(content) {
 border-radius: 10px;
  background: var(--ion-color-light);
  color: var(--ion-color-light-contrast);
  display: flex;
  height: 390px;
  width: 250px;
}

(I don’t like doing this, as I don’t know what it does :grimacing: - but it “works”)