Bootstrap: Mobile modal scroll issues (Beta 2)

[01Kuzma]

Hello!
Firstly I've encountered this issue with v3.3.7.
The problem occurs with Firefox mobile and Safari
I've found this thread:
https://stackoverflow.com/questions/21024774/twitter-bootstrap-3-modal-on-mobile-scroll-issues
which covers this bug. I've tried proposed solutions but is haven't solved my problem, so I decided upgrade to v4 beta 2. And the bug still exists!

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[01Kuzma]

Can't reproduce it on CodePen or JS Bin. MAybe of a used parallax effect.
I could temporary post the link to live project version with this bug

[Johann-S]

Can you juste create a CodePen with your HTML markup to allow us to reproduce your bug

[01Kuzma]

Sorry, I've just tried to reproduce it on CodePen, but I failed.
Here is online demonstration of this bug. Modal is not scrollable. Tested on Mobile Firefox 56 and Safari. It's only scrollable at top and bottom positions.

[Johann-S]

I made a CodePen for you : https://codepen.io/Johann-S/pen/eegRqe

[mdo]

We never fixed this in v3, and I don't think we've fully done it for v4, but I think this is generally a won't fix given the state of fixed position and scroll/touch keyboard bugs in iOS. Thoughts, @twbs/team?

[XhmikosR]

Just a note: on Firefox 57, the background still scrolls in the live example but not in the pen.

EDIT:
Are we sure this solution doesn't apply to v4?

[andresgalante]

@twbs/team Why not using the shinny and non-standard overflow-scrolling?
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

@Johann-S I've added more text and a scale meta tag to your pen and an -webkit-overflow-scrolling: touch. This is debug view to test on your mobile devices:
https://s.codepen.io/andresgalante/debug/MOpbrx

I could only tested it on iOS Safari and it works. Are you guys able to test it on other mobile browsers?

I know it's non-standard, but if we can test it enough and prove that adding it doesn't hurt other browsers we should be ok.

Here is the normal pen: https://codepen.io/andresgalante/pen/MOpbrx

[andresgalante]

Sorry, I've just saw https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss#L25-L27

[moso]

It's sort of weird that you're able to scroll in the background, as we're applying overflow: hidden to body when the modal opens here: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/modal.js#L141

...or at least we should be. Maybe we should be using a jQuery selector like $('body').addClass(ClassName.OPEN) since we're already using jQuery?

[mdo]

After researching this a bit more again, we're probably going to need some additional JS to make this happen as intended. Nothing I've tried has stopped the scroll 100% of time on iOS and desktop.

[patrickhlauke]

There's a tiny hope that iOS/webkit may, in future, support scroll-chaining control via overscroll-behavior. https://developers.google.com/web/updates/2017/11/overscroll-behavior
From recent tests, though, it's not the case yet, and of course Apple are secretive about whether or not they will.

[01Kuzma]

@patrickhlauke, but it also affects Firefox

[patrickhlauke]

Firefox, and any other browser, on iOS uses webkit, so it's a moot point

[719media]

I've been dealing with this problem in various capacities for a long time. There are many answers out there that all have some major issues. I came across a codepen a few days ago that actually solved the issue with the least amount of drawbacks yet (I am not the author of the codepen):

https://codepen.io/anon/pen/PExoGR

Here are the drawbacks:
1) This causes a very minor and hardly noticeable pixel jump at the end of the scroll.
2) You're attaching a scroll event using js. This blows, obviously everybody wants a css only solution, but I haven't found a good one yet.
3) This only works if the content creates a scrolling overflow. Otherwise there will not be scroll and a touch will still bubble up and scroll the body. You can use various js solutions to calculate if the content is creating scroll or not, and disable scroll appropriately there. Alternatively, you can add a block element inside a flex container and force a 2 pixel scroll at a minimum so that the scroll can be captured and blocked.

Obviously https://developers.google.com/web/updates/2017/11/overscroll-behavior would be a thousand times better if apple ever supports it... sigh

[ctipper]

So -webkit-overflow-scrolling: touch is lurking in _tables.scss and I got hit trying to put a modal inside a responsive table, the glitch is unrecoverable without hitting page reload. My use suggests this 'experimental feature' (according to above MDN link) has been experimental for quite some years (at least dating back to iOS 9) and won't be fixed it seems quite a profound rendering bug. I can remove from my own build but I question the use of this feature, it just doesn't seem worth the cost.

Here's the snippet I refer to _tables.scss

[01Kuzma]

Any news regarding this?

[internalsystemerror]

Is there a valid workaround to prevent the scroll of the background when the modal is scrollable?

[719media]

Best I’ve seen is

https://www.npmjs.com/package/body-scroll-lock

On Jul 4, 2019, at 6:09 AM, Gary Lockett [e-mail] wrote:

Is there a valid workaround to prevent the scroll of the background when the modal is scrollable?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[sassquad]

I came across a potential solution on Stack Overflow today, which can be tested at https://daguy.github.io/ios-modal-fix/.

I've tried this in iOS Simulator, and unlike the modal test outlined at https://getbootstrap.com/docs/4.3/components/modal/#scrolling-long-content, this test page doesn't allow the body to scroll underneath the modal.

I'm aware much of this will be fixed by Safari 13 (see this specific note, but I though it worth raising here for the benefit of other developers unaware.

[mdo]

Closing as a (very old) duplicate of #22311. I missed the above comment about this being fixed in iOS 13. See the comment at https://github.com/twbs/bootstrap/issues/22311#issuecomment-695025949 and weigh in if we should add this the overflow scroll back in knowing it could negatively affect some iOS users.