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.
Not sure why but I solved it by adding “--height: auto;
” to ion-modal’s css. This dismissed the modal-shadow 
not very intuitive
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
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);
}
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
- but it “works”)