The Bootstrap 4.x framework has a known issue with iOS and modals: When a user “scrolls” on content within a modal overlay, particularly text input fields, background content may scroll (instead).
A quick fix:
body {
width: 100%;
max-width: 100%;
will-change: position;
}
// Prevent Bootstrap 4.x iOS issue where user
// scrolls the body behind the modal when body height > 100vh
body.modal-open {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
The use of will-change is entirely optional and may be overkill for the devices and browsers you intend to support. Use with caution.
.modal {
will-change: display;
}
.modal-dialog {
will-change: transform;
}
If I’ve “locked” the modal to a given height (to enable scrolling within the modal content, I’ll generally re-introduce a rule to activate that nice “bounce scrolling” effect on iOS. The target element may be different for your application or site.
.modal-body {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
You can further choose to wrap these rules with a condition to target iOS devices only, if required:
@supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
Hope that helps! Good luck.
Thanks a bunch! I’ve been looking for a solution to this issue for hours. This just saved me a lot of headache. Thumbs up!
Happy to help. And I’ve been there!
Seems to work fine, I still get horizontal scrolling with Datatables though.
Thanks.
You can probably just change your tables config as concerns the hScrolling bit. Or use a different overflow-x property. Hope that helps!