bug: modal doesn't dismiss when backdrop is clicked on IOS
See original GitHub issueBug Report
Ionic version:
[x] 5.x
Current behavior:
On IOS, ion-modal
does not dismiss when backdrop is clicked even though backdropDismiss
is set to true.
Expected behavior:
ion-modal
should dismiss when backdropDismiss
is set to true.
Steps to reproduce:
Open a modal which has backdropDismiss
set to true and click the backdrop.
Related code:
Template
const modal = await this.modalController.create({
component: ItemModalPage,
cssClass: 'item-modal',
backdropDismiss: true,
showBackdrop: true,
animated: true,
componentProps: {
item: item,
},
});
CSS
.item-modal .modal-wrapper {
top: 40%;
bottom: 0;
left: 0;
right: 0;
position: fixed;
display: block;
border-radius: 2px;
min-width: 100%;
}
Other information:
As mentioned above, this only seems to happen on IOS
Ionic info:
Ionic:
Ionic CLI : 5.4.13 (/Users/chris/.nvm/versions/node/v12.9.0/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.1.0
@angular-devkit/build-angular : 0.1000.0-next.3
@angular-devkit/schematics : 10.0.0-next.3
@angular/cli : 9.1.4
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 7 other plugins)
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
Android SDK Tools : 26.1.1 (/Users/chris/Library/Android/sdk/)
NodeJS : v12.9.0 (/Users/chris/.nvm/versions/node/v12.9.0/bin/node)
npm : 6.14.4
OS : macOS Catalina
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Cannot dismiss a modal by clicking the backdrop (ionic 6)
In the inspector, I can solve this issue by adding display: none to the element above. However, in practice this wont work because...
Read more >Ionic 2: Modal doesn't close when clicking on backdrop
I want the modal to close when I click on the backdrop which I think is expected behavior. However, nothing happens when clicking...
Read more >JavaScript · Bootstrap
modal -backdrop to provide a click area for dismissing shown modals when clicking outside the modal. Via data attributes. Activate a modal without...
Read more >iOS 14 (SwiftUI) Sheet Modals not … | Apple Developer Forums
Sometimes a modal is automatically (non-desired) closed right after it opens, and after that, the modal works fine (and so it is not...
Read more >10 Most Common Bootstrap Mistakes That Developers Make
We have specified that the modal won't close when user clicks outside the modal by using the data-backdrop option, and we have disabled...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Sorry for that and thanks very much for the solution!
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.