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

Question

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  lt head gt     lt meta name  viewport  content  width 1100  initial-scale 1  gt    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

User · Answer

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.

User · Answer

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

User · Answer

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  lt body gt   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

User · Answer

body  height  100   overflow  hidden  important  width  100   position  fixed    works on iOS9

User · Answer

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

User · Answer

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

User · Answer

Creating a site wrapper div inside the  lt body gt  and applying the overflow-x hidden to the wrapper instead of the  lt body gt  or  lt html gt  fixed the issue     It appears that browsers that parse the  lt meta name  viewport  gt  tag simply ignore overflow attributes on the html and body tags   Note  You may also need to add position  relative to the wrapper div

User · Answer

try  html  body     overflow-x hidden       instead of just  body     overflow-x hidden

User · Answer

As subarachnid said overflow-x hidden for both body and html worked Here s working example    HTML    lt div class  contener  gt     lt div class  menu  gt    das    lt  div gt     lt div class  hover  gt       lt div class  img1  gt      First Strip      lt  div gt        lt div class  img2  gt      Second Strip      lt  div gt   lt  div gt   lt  div gt   lt div class  baner  gt  dsa  lt  div gt     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

User · Answer

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  gt  gt  inside it  gt  gt  end screen 2 div   gt  gt  inside it  gt  gt  end screen 2    end screen is the wrapper of end screen 1 and end screen 2 div s

User · Answer

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

User · Answer

As  Indigenuity states  this appears to be caused by browsers parsing the  lt meta name  viewport  gt  tag   To solve this problem at the source  try the following    lt meta name  viewport  content  width device-width  initial-scale 1  minimum-scale 1  gt    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

User · Answer

This is the simplest solution to solve horisontal scrolling in Safari   html  body     position relative    overflow-x hidden

User · Answer

Keep the viewport untouched   lt meta name  viewport  content  width device-width  initial-scale 1 0  gt   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

User · Answer

Adding a wrapper  lt div gt  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

User · Answer

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

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

Examples related to css

Examples related to overflow

Examples related to viewport

Examples related to mobile-browser