Modal scrolling on mobile devices - what is the current state? #15852
Description
Fiddle: http://jsfiddle.net/stefek99/t6oq2gze/
It was also here:
- Scrolling in Modal makes background scroll on Safari #7501
- Modal overflow does not scroll on iOS #3361
Some StackOverflow too:
- http://stackoverflow.com/questions/19060301/how-to-prevent-background-scrolling-when-bootstrap-3-modal-open-on-mobile-browse
- http://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened
I think it's a common issue and should be fixed, my solution (after doing some research):
body.modal-open {
position: fixed;
}
Activity
cvrebert commentedon Feb 20, 2015
We explicitly mention this in the documentation:
Note that this has the side-effect of "scrolling" to the top of the page while the modal is open.
mdo commentedon Feb 22, 2015
Closing then.
felipe-canaviri commentedon Dec 22, 2015
Hello Bootstrap team,
As mentioned in the issue #7501, this bug should be fixed in the version 3.
I'm currently using version 3.3.6 and unfortunately the issue can be still be reproduced, similar to the animated picture above. Also, if you use an iPad with iOS 8 by browsing this page https://nakupanda.github.io/bootstrap3-dialog/, you'll be able to reproduce when opening the modal samples showed in the page. Please note that the samples in the page are using Bootstraop 3.3.5.
Despite that this effect is mentioned in the documentation, I wonder if there will be chances to fix the issue since it's really annoying when the modal has its own scrolling behavior.
Thanks so much in advance for any feedback you can provide.
dvf commentedon Mar 6, 2016
Why was this closed?
cvrebert commentedon Mar 6, 2016
@vanflymen It's a bug in the browsers themselves. We can't do anything about it on our end. It's already mentioned in our documentation as a known issue.
cvrebert commentedon Mar 6, 2016
If you want to follow its progress, the browser bug is https://bugs.webkit.org/show_bug.cgi?id=153852
g0dlight commentedon May 3, 2016
Just run into this bug, Here is my fix:
$('body').on('touchmove', function(e){if($('.scroll-disable').has($(e.target)).length) e.preventDefault();});$('body').on('shown.bs.modal', function(){$(this).addClass('scroll-disable');});$('body').on('hidden.bs.modal', function(){$(this).removeClass('scroll-disable');});