Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

css overflow viewport mobile-browser

244,164

Solution 1

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.

Solution 2

try

html, body {
  overflow-x:hidden 
}

instead of just

body {
  overflow-x:hidden 
}

Solution 3

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;
}

Solution 4

As @Indigenuity states, this appears to be caused by browsers parsing the <meta name="viewport"> tag.

To solve this problem at the source, try the following:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

In my tests this prevents the user from zooming out to view the overflowed content, and as a result prevents panning/scrolling to it as well.

Solution 5

This is the simplest solution to solve horisontal scrolling in Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}

View more solutions

244,164

Indigenuity

Updated on July 12, 2022

Comments

Indigenuity almost 2 years
I have a website here.

Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden.

In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags.

Even if I set the viewport to a specific width in the <head>:
```
<meta name="viewport" content="width=1100, initial-scale=1">
```
The site expands to the 1100px but still has the whitespace beyond the 1100.

What am I missing? How do I keep the viewport to 1100 and cut off the overflow?
- Chuck Le Butt over 8 years
  
  This is especially an issue in iOS9
Indigenuity over 11 years

Thanks, but the application of overflow anything to html and/or body in any combination didn't solve the issue.
Đinh Carabus over 11 years

Sorry that it didn't work out for you. Before I answered I made a quick test using your site and applying my suggestion to your css. It fixed the problem for the standard- and dolphin browser on my android phone at least.
Indigenuity over 11 years

Out of curiousity, what do you use to modify css on your mobile browsers?
Đinh Carabus over 11 years

I dont know if that is possible. I'm also looking for a mobile browser with some sort of developer plugin :) In your case I just downloaded part of your site to make the changes locally on my pc, then uploaded it onto my webserver - very annoying workaround ;)
Victor S over 11 years

I found that in addition to setting the overflow to hidden, I had to set the position to fixed...
Gchtr almost 11 years

For me, just adding overflow-x: hidden to the first div inside body worked just fine. No need to add another div, just try to set it to your outermost div.
theorise over 10 years

Adding position to fixed stops me from being able to scroll!
Jason Farnsworth over 10 years

Adding a wrapper div with overflow: hidden did the trick for me in iOS7!
Admin over 9 years

I tried, I put all my code inside a div and give it overflow-x:hidden but doens't work, I add <meta name="viewport" content="width=device-width, initial-scale=1"> too but nothing changed :/ any ideas?
CJT3 over 9 years

if you use box-sizing: border-box; you can add padding to a 100% width div.
WraithKenny about 9 years

Is there anyway to get the mobile part to not jump to top?
Vennsoh about 9 years

Making a div wrapper around everything in <body> works.
Eduard almost 9 years

Worked for me. eduardd.eu/projects/ezo ( between 480 and 992px footer had a problem with that overflowing image of the woman and towels )
Ian Kemp over 8 years

How is this different to @Indigenuity's answer?
leepowers over 8 years

Wasn't working for me on MobileSafari (iOS9) until I ensured the viewport meta tag looked like this: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> - at issue here: changing the main content container can cause a big change in document height, which in turn can cause weird zooming behavior.
spaghetticode over 8 years

@ian Kemp overflow: hidden != overflow-x: hidden
jupiteror over 8 years

@leepowers overflow-x: hidden is still not working for me even after I add this meta tag. Could you please share a link to your website where it is working?
Chuck Le Butt over 8 years

What worked for me was turning the element that was supposed to be hidden by overflow from position: absolute to position: fixed. Thankfully.
Emil Borconi over 8 years

@WraithKenny - If you want the page to prevent jumping to the top on a mobile device, you can use the following hack'ish/ugly approach. Inside your modal function, make sure you get the current scroll offset before doing anything, than apply the modal style together and also set the top margin of your body equal to the minus of the current offset. Make sure when you remove the modal you, set the margin back to 0 and scroll the page back to the original offset.
craigstar about 8 years

overflow: hidden; height: 100%; together works for me
ThaoD5 almost 8 years

It does work, but putting position:fixed to your body does make you scroll to top
Tobias almost 8 years

This solution only works in case your modal's content fits into the screen, i.e. you don't require to scroll the modal itself.
sohaiby almost 8 years

There are other fixed and absolute positioned elements on my page as well. Making body position:fixed or absolute disturbing their positions as well. Not suitable/working in my case :(
Garavani over 7 years

Weird but it worked for me without fixed position, also. Only one from all the solutions here!
JoeCodeCreations about 7 years

Definitely ^ if you find an element outside of that region make sure it's not set to absolute but instead set to fixed.
oldboy about 7 years

@theorise nothing worked but the position: fixed. thank you <33
JamesWilson about 7 years

Adding initial-scale=1 to an existing viewport metatag does indeed fix the problem. Thanks!
kiwicomb123 almost 7 years

Only one that worked for me, using chrom and boostrap + angularJS
hamncheez almost 7 years

Does anyone know why this works, when specifying body{} and html{} separately doesnt?
LarS over 6 years

It seems to work. But do you have an explanation why this works?
LarS over 6 years

No, it finally didn't work. I ended up doing the math and made sure that div's aren't wider than allowed, css calc() helped me here a lot as it allows the mixture of relative widths (vw or %) and absolute widths (px).
Indigenuity over 6 years

I think this answers a different question than I intended to ask, but it answers it well. I hadn't intended the question to be about modals, but rather about any arbitrary element on a page overflowing. So position:fixed wouldn't be appropriate on many of those elements. The original question didn't really specify that though, so I still think this answer is very helpful.
Waltur Buerk over 6 years

Ofcourse this is something of a workaround. There is still something overflowing somewhere, it's just cut off now. Try adding a css rule: * { outline: 1px solid red; } If you still can't find the overflowing element, then it's probably caused by a margin somewhere. Try adding * { margin:0 !IMPORTANT; } and see if the overflow disappears.
CunningFatalist over 6 years

Works for me. Interesting that the hidden element changes the body's width. For me, however, this is the case for ALL Safari browsers, not only the mobile ones. Just had to fix a Bootstrap 4 table-responsive Bug. This was the solution.
Thomas Valadez about 6 years

Hey gang, when I found that position:relative works as well.
jpenna almost 6 years

For me it was the minimum-scale=1 that fixed it
Tom Walker almost 6 years

I'm not sure what the guy who said this doesn't work was doing wrong (maybe didn't refresh his cache). This solution absolutely does work.
diachedelic over 5 years

This is the only thing that helped me hide an absolutely positioned element which animates offscreen
pop about 5 years

This worked for me. The side effect was that I've got two scroll bars instead of one. The solution was to make it overflow: hidden instead of overflow-x: hidden. Works on mobile Safari, Chrome, IE11 on OSX and Win.
staxim about 5 years

I can't believe this is still a problem in 2019. But the solution above totally worked. Thx.
Arno van Oordt almost 5 years

In needed to add height:100%; as well, otherwise vertical scroll would not work properly on pages with loading images (which make the page grow in height).
user3666653 over 4 years

overflow: scroll if you want the user to still be able to see the overflowed content
KuldipKoradia over 4 years

I have tried this for my ionic app (only for iOs Devices) but it's not working for any position of body content.
Mir Stephen over 4 years

You saved me man, God knows I have this problem working on since last 3 hours Thank You 1M
powerbuoy over 4 years

A problem with setting overflow-x: hidden on body is that position: sticky stops working.
Harsha Limaye almost 4 years

This is what actually worked for me after trying everything else. Thanks a lot !
pinglock almost 4 years

Fixed the issue for me as well. Relative positioning for the div wrapper was not needed in my case.
pinglock almost 4 years

Update - Relative positioning was important after-all! Without it, landscape orientation on mobile browsers broke the layout.
k0o over 3 years

te amo breoooooh <33333333333333333333333333333333333333333333333
Erum over 3 years

This solution is not working in IOS 13.0 or above devices. Any solution ?
George WS about 3 years

This worked for me when also including position: relative on body.
Hasintha Abeykoon about 3 years

Hey great answer, though this solves the initial problem, but for any of you got a sticky nav, this makes it not stick anymore! I solved it by putting the sticky nav outside of the wrapper!
Iggy about 3 years

It helps, but not preventing horizontal scrollbar on mobile yet.
leipzy almost 3 years

Wew, thanks for this. This happened in my case. Only on media queries the whitespaces appear on bottom and right side. You bro deserve a million + and thanks
TommyAutoMagically almost 3 years

I initially thought this worked, but that was not the case. Most of these answers address the symptoms of the problem. The best solution seems to be to fix the cause of the problem (the <meta name="viewport"> tag).
TommyAutoMagically almost 3 years

Much better than the other solutions here - fixing the cause of the problem instead of a symptom. Thanks!
shitpoet over 2 years

For me this seems to not solve the problem on Chrome Modile
Rick Kukiela over 2 years

You should absolutely never prevent the user from zooming.
Arad over 2 years

@rinogo The <meta name="viewport"> solution addresses the symptoms as well. Because the horizontal scrollbar still appears, the user just can't scroll, which isn't a perfect solution.
JSman225 about 2 years

Wow thanks! The other suggestions were a bit bulky, and I was glad to find such a simple solution. :)