Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
Creating a site wrapper div inside the <body> and applying the overflow-x:hidden to the wrapper instead of the <body> or <html> fixed the issue.
It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.
Note: You may also need to add position: relative to the wrapper div.
try
html, body {
overflow-x:hidden
}
instead of just
body {
overflow-x:hidden
}
VictorS's comment on the accepted answer deserves to be it's own answer because it's a very elegant solution that does, indeed work. And I'll add a tad to it's usefulness.
Victor notes adding position:fixed works.
body.modal-open {
overflow: hidden;
position: fixed;
}
And indeed it does. However, it also has a slight side-affect of essentially scrolling to the top. position:absolute resolves this but, re-introduces the ability to scroll on mobile.
If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the position.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
I also add this to prevent the underlying page from jumping left/right when showing/hiding modals.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}