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

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?

This question is related to css overflow viewport mobile-browser

The answer is


The only way to fix this issue for my bootstrap modal (containing a form) was to add the following code to my CSS:

.modal {
    -webkit-overflow-scrolling: auto!important;
}

Keep the viewport untouched: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Assuming you would like to achieve the effect of a continuous black bar to the right side: #menubar shouldn't exceed 100%, adjust the border radius such that the right side is squared and adjust the padding so that it extends a little more to the right. Modify the following to your #menubar:

border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/

Adjusting the padding to 10px of course leaves the left menu to the edge of the bar, you can put the remaining 40px to each of the li, 20px on each side left and right:

.menuitem {
display: block;
padding: 0px 20px;
}

When you resize the browser smaller, you would find still the white background: place your background texture instead from your div to body. Or alternatively, adjust the navigation menu width from 100% to lower value using media queries. There are a lot of adjustments to be made to your code to create a proper layout, I'm not sure what you intend to do but the above code will somehow fix your overflowing bar.


Adding a wrapper <div> around the entirety of your content will indeed work. While semantically "icky", I added an div with a class of overflowWrap right inside the body tag and then set set my CSS like this:

html, body, .overflowWrap {
overflow-x: hidden;
}

Might be overkill now, but works like a charm!


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

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

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

works on iOS9


I encountered the same problem with Android devices but not iOS devices. Managed to resolve by specifying position:relative in the outer div of the absolutely positioned elements (with overflow:hidden for outer div)


I've just been working on this for a few hours, trying various combinations of things from this and other pages. The thing that worked for me in the end was to make a site wrapper div, as suggested in the accepted answer, but to set both overflows to hidden instead of just the x overflow. If I leave overflow-y at scroll, I end up with a page that only scrolls vertically by a few pixels and then stops.

#all-wrapper {
  overflow: hidden;
}

Just this was enough, without setting anything on the body or html elements.


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

No previous single solution worked for me, I had to mix them and got the issue fixed also on older devices (iphone 3).

First, I had to wrap the html content into an outer div:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

Then I had to apply overflow hidden to the wrapper, because overflow-x was not working:

  #wrapper {
    overflow: hidden;
  }

and this fixed the issue.


I solved the issue by using overflow-x:hidden; as follows

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

structure is as follows

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's


try

html, body {
  overflow-x:hidden 
} 

instead of just

body {
  overflow-x:hidden 
}

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.

This worked for me after also adding position: relative to the wrapper.


As subarachnid said overflow-x hidden for both body and html worked Here's working example

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

Link


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.


I had tried many ways from replies in this topic, mostly works but got some side-effect like if I use overflow-x on body,html it might slow/freeze the page when users scroll down on mobile.

use position: fixed on wrapper/div inside the body is good too, but when I have a menu and use Javascript click animated scroll to some section, It's not working.

So, I decided to use touch-action: pan-y pinch-zoom on wrapper/div inside the body. Problem solved.


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to overflow

Bootstrap button drop-down inside responsive table not visible because of scroll Remove scrollbars from textarea Carry Flag, Auxiliary Flag and Overflow Flag in Assembly Horizontal scroll css? Body set to overflow-y:hidden but page is still scrollable in Chrome How can I add a vertical scrollbar to my div automatically? CSS text-overflow: ellipsis; not working? Have a fixed position div that needs to scroll if content overflows Mobile overflow:scroll and overflow-scrolling: touch // prevent viewport "bounce" Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

Examples related to viewport

disable viewport zooming iOS 10+ safari? Get viewport/window height in ReactJS What does the shrink-to-fit viewport meta attribute do? What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag? Mobile overflow:scroll and overflow-scrolling: touch // prevent viewport "bounce" Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers Disable Pinch Zoom on Mobile Web scale fit mobile web content using viewport meta tag div with dynamic min-height based on browser window height What's the point of 'meta viewport user-scalable=no' in the Google Maps API

Examples related to mobile-browser

How to hide a mobile browser's address bar? Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers Detecting a mobile browser forcing web-site to show in landscape mode only