Modal background scrollable (iOS Safari)

[SebastianSchenk]

System
iOS 10.2 (iPad Mini 3)

Browser
iOS Safari

Test case
https://v4-alpha.getbootstrap.com/components/modal/#live-demo

Description
When opening a modal in any other browser than iOS Safari, the background isn't scrollable; neither by mouse wheel nor by touch.

On iOS Safari the background is scrollable, which shouldn't be the case as far as i know.

[oktalk]

To my knowledge there's no good solution for this issue. You'll end up making messy compromises. Even modals in Bootstrap v3 allow the background to scroll when a modal is open.

[bkdotcom]

Webkit Bug 153852

[SebastianSchenk]

Ok I see. Thank you.

[Johann-S]

Sorry @SebastianSchenk but I reopen your issue because we have to note that's a bug browser in our documentation

[a3rev]

Hi - have used the bootstrap modal to create a form pop up in our plugin Contact Us page Contact People and the Premium Version. Love the script - but we are seeing bug in iOS - which is the bug raised in this issue.

The Modal pop opens a contact form from the profile card on the plugin -

The issue we are having is scroll in Mobile with iOS regardless if using Safari or Chrome browser

Have made a video to show the issue

When touch swipe if the finger lands on area between input fields on the form modal scrolls fine - but if the finger lands on an input field the modal don't scroll - the background does.

For a user this is very bad UX - for a user they do not know that is the issue - like we didn't until we figured it out.

We see this issue with Chrome on iOS as well as safari

[Duplicants]

Is there any workaround to this?

[Subair-tc]

we are facing the same issue for IOS 10.3 and for latest version iPhone of IOS it's working fine

[itwasmattgregg]

You can write a listener for touchMove and stopPropagation on that event which will only scroll the modal.

[radogado]

Please check this solution for fluid scroll of modal only, fixed background, iOS Safari: https://github.com/radogado/bootstrap-modal-ios

[sinneren]

@radogado doesn't work for me on iphone 5 iOs 10, 11

[radogado]

@sinneren on iPhone 5 iOS 10 landscape, there is a bug with the top Safari toolbar. Is this the problem you experience? Thanks.
There is no iOS 11 for iPhone 5 and the script seems to work on iPhone 5s iOS 11.

[sinneren]

@radogado I use both iPhones with 10 and 11 iOS. And after including your css and js the background is still scrollable :( I tried many solutions, with fixed position, with android css property, and many others... and I have no padding right of modal... why we don't have only android in this world :D

[radogado]

@sinneren Please try the demo first, not your app, because I tested it and it works. Thanks! https://radogado.github.io/bootstrap-modal-ios/

[SebastianSchenk]

@radogado don't know if this demo is intended to work on desktop, but on desktop the large modal is not scrollable at all

[radogado]

@SebastianSchenk it is scrollable on desktop, except in Chrome 67 for Mac, which has a known bug, fixed in 68 beta. Which OS/browser are you testing? Thanks.

[sinneren]

@radogado Tried again include your script. In second try portrait works fine. But landscape has scrolling 50\50

[radogado]

@sinneren does the demo have the same problem? Trying to figure out if the problem is integration or the original script. What does 50/50 mean – sometimes the modal scrolls and sometimes not? Thanks.

[sinneren]

@radogado demo hasn't content at first. Then, nothing to affect for it on my integration. On demo I'm not seen it. 50\50 means is in half of cases I reproduce issue. Just for information. I like option just with portrait orientation.

[SebastianSchenk]

@radogado yes, was using Chrome 67 for Mac

[kweij]

I've soluted this problem using just JavaScript in the following gist:
https://gist.github.com/kweij/5a0eac4e68e80950c937b6eca10681cb

You can also use CSS for the styling, but I intentionally went for a solution in 1 place.

This may help others out here aswell.

[Sorazuu]

This work for me on ios 12 and iPhone 6s: vuetifyjs/vuetify#5207

Add: -webkit-overflow-scrolling: touch

[kuongknight]

Add to html:
overflow: scroll; -webkit-overflow-scrolling: touch;

[pretty]

@kuongknight do you add this to the css of the modal or the parent body?

[kuongknight]

@pretty No

[Qvatra]

any update on this?

[vkalach]

any update on this?

Add to html:
overflow: scroll; -webkit-overflow-scrolling: touch;

this solution works

[xenogew]

any update on this?

Add to html:
overflow: scroll; -webkit-overflow-scrolling: touch;

this solution works

@vkalach
Do you mean add to <html> tag level?

Or just only add them to <body> tag level is also OK?

[sassquad]

I'll reference this comment I left on a similar issue - as it mentions a potential fix, that I came across on Stack Overflow.

[sgup]

@xenogew
I added it to <html>, seems to fix the problem.

[patrickhlauke]

if only Safari supported overscroll-behavior ... sigh

https://caniuse.com/#feat=mdn-css_properties_overscroll-behavior

[mdo]

Dug into this again—apparently this was fixed with iOS 13! See #20803 and the bug report https://bugs.webkit.org/show_bug.cgi?id=158342. Our iOS supported versions are 10+, so there's some risk in bringing back the -webkit-overflow-scrolling: touch; property.

Do folks think it's worth it?

[mdo]

Closing out as wildly stale. 😬

[ohrrkan]

This issue was still present > not directly link to bootstrap but a more global IOS issue.

for people who need a solution until safari on IOS 16 better adoption (https://caniuse.com/mdn-css_properties_overscroll-behavior) :

JS :

document.body.addEventListener('show.bs.modal', () => { document.querySelector(':root').classList.add('PATCH_modal'); }); document.body.addEventListener('hidden.bs.modal', () => { document.querySelector(':root').classList.remove('PATCH_modal'); });

Css :

.PATCH_modal { touch-action: none; overscroll-behavior: none; overflow: hidden; -webkit-overflow-scrolling: auto; }