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

Asked 11/1, 2013 at 1:7 Answered 19/12, 2023 at 2:15

Solved css overflow viewport mobile-browser

189

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?

Stellastellar answered 11/1, 2013 at 1:7 Comment(1)

This is especially an issue in iOS9 – Hollyanne 12/1, 2016 at 12:46

366

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.

Stellastellar answered 11/1, 2013 at 3:10 Comment(21)

I found that in addition to setting the overflow to hidden, I had to set the position to fixed... – Toniatonic 22/2, 2013 at 5:22

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. – Delbert 12/8, 2013 at 15:41

Adding position to fixed stops me from being able to scroll! – Quartersaw 25/10, 2013 at 15:44

Adding a wrapper div with overflow: hidden did the trick for me in iOS7! – Mainspring 3/3, 2014 at 7:52

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? – Solicitous 25/10, 2014 at 19:20

Making a div wrapper around everything in <body> works. – Unblown 2/6, 2015 at 23:26

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. – Schonfield 18/11, 2015 at 3:42

@Schonfield 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? – Alphonsa 1/12, 2015 at 11:29

overflow: hidden; height: 100%; together works for me – Pigheaded 15/4, 2016 at 18:47

Definitely ^ if you find an element outside of that region make sure it's not set to absolute but instead set to fixed. – Biotechnology 19/4, 2017 at 9:54

@Quartersaw nothing worked but the position: fixed. thank you <33 – Hurtado 20/5, 2017 at 1:10

Hey gang, when I found that position:relative works as well. – Obadiah 11/4, 2018 at 16:43

overflow: scroll if you want the user to still be able to see the overflowed content – Occipital 4/11, 2019 at 20:15

I have tried this for my ionic app (only for iOs Devices) but it's not working for any position of body content. – Echopraxia 5/11, 2019 at 8:2

You saved me man, God knows I have this problem working on since last 3 hours Thank You 1M – Statuary 6/2, 2020 at 5:38

Fixed the issue for me as well. Relative positioning for the div wrapper was not needed in my case. – Pyemia 23/8, 2020 at 7:26

Update - Relative positioning was important after-all! Without it, landscape orientation on mobile browsers broke the layout. – Pyemia 27/8, 2020 at 1:16

te amo breoooooh <33333333333333333333333333333333333333333333333 – Parts 25/11, 2020 at 15:54

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! – Kex 27/5, 2021 at 9:54

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). – Nottage 22/9, 2021 at 15:37

@Nottage 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. – Liggins 19/3, 2022 at 10:44

108

try

html, body {
  overflow-x:hidden 
}

instead of just

body {
  overflow-x:hidden 
}

Kindergartner answered 11/1, 2013 at 2:41 Comment(8)

Thanks, but the application of overflow anything to html and/or body in any combination didn't solve the issue. – Stellastellar 11/1, 2013 at 2:57

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. – Sodden 11/1, 2013 at 3:11

Out of curiousity, what do you use to modify css on your mobile browsers? – Stellastellar 11/1, 2013 at 3:12

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 ;) – Sodden 11/1, 2013 at 3:24

Worked for me. eduardd.eu/projects/ezo ( between 480 and 992px footer had a problem with that overflowing image of the woman and towels ) – Zephyrus 1/8, 2015 at 11:38

Does anyone know why this works, when specifying body{} and html{} separately doesnt? – Colonialism 5/9, 2017 at 19:25

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). – Rosalie 22/8, 2019 at 7:52

This worked for me when also including position: relative on body. – Gail 20/4, 2021 at 0:11

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

Ingeminate answered 13/7, 2014 at 21:9 Comment(6)

Is there anyway to get the mobile part to not jump to top? – Alexandra 26/5, 2015 at 21:57

What worked for me was turning the element that was supposed to be hidden by overflow from position: absolute to position: fixed. Thankfully. – Hollyanne 12/1, 2016 at 22:58

@Alexandra - 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. – Coverage 25/3, 2016 at 15:45

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. – Sacramentalism 12/8, 2016 at 5:44

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 :( – Newhouse 14/9, 2016 at 11:47

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. – Stellastellar 6/2, 2018 at 19:56

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.

Kimura answered 18/4, 2016 at 11:52 Comment(10)

Adding initial-scale=1 to an existing viewport metatag does indeed fix the problem. Thanks! – Burka 5/6, 2017 at 13:17

For me it was the minimum-scale=1 that fixed it – Spoonerism 23/7, 2018 at 10:50

This is what actually worked for me after trying everything else. Thanks a lot ! – Ancilla 3/7, 2020 at 11:30

It helps, but not preventing horizontal scrollbar on mobile yet. – Somewhere 18/6, 2021 at 14:13

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 – Plop 7/7, 2021 at 3:25

Much better than the other solutions here - fixing the cause of the problem instead of a symptom. Thanks! – Nottage 22/9, 2021 at 15:38

For me this seems to not solve the problem on Chrome Modile – Unlearned 26/10, 2021 at 21:51

Wow thanks! The other suggestions were a bit bulky, and I was glad to find such a simple solution. :) – Ascetic 14/6, 2022 at 16:37

Any reason this is not the accepted answer? This should be the accepted solution IMO, OP even referenced meta tags. Other solutions strike me as too hacky. – Perce 24/9, 2022 at 8:1

This seems to solve the issue for me but now instead of zooming out I can horizontally scroll the whole screen and there's no content to the right... any ideas? – Teodoor 11/8, 2023 at 2:26

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

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

Sooth answered 4/9, 2017 at 14:49 Comment(9)

It seems to work. But do you have an explanation why this works? – Doxology 14/12, 2017 at 6:6

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). – Doxology 16/12, 2017 at 12:0

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. – Sooth 14/2, 2018 at 13:23

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. – Session 1/3, 2018 at 8:37

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. – Lietuva 27/8, 2018 at 22:47

This is the only thing that helped me hide an absolutely positioned element which animates offscreen – Handsel 14/1, 2019 at 4:43

I can't believe this is still a problem in 2019. But the solution above totally worked. Thx. – Ailina 19/6, 2019 at 20:34

A problem with setting overflow-x: hidden on body is that position: sticky stops working. – Success 27/2, 2020 at 10:27

This solution is not working in IOS 13.0 or above devices. Any solution ? – Blanton 14/12, 2020 at 8:50

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

works on iOS9

Chew answered 21/9, 2015 at 15:2 Comment(3)

It does work, but putting position:fixed to your body does make you scroll to top – Ascription 1/8, 2016 at 8:51

Weird but it worked for me without fixed position, also. Only one from all the solutions here! – Amelia 14/1, 2017 at 22:3

Only one that worked for me, using chrom and boostrap + angularJS – Learn 8/7, 2017 at 19:0

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.

Allegraallegretto answered 29/11, 2016 at 11:46 Comment(1)

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. – Seely 14/6, 2019 at 12:48

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.

Trucking answered 11/1, 2013 at 4:43 Comment(1)

if you use box-sizing: border-box; you can add padding to a 100% width div. – Roi 6/1, 2015 at 13:31

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.

Subarctic answered 16/10, 2015 at 9:17 Comment(2)

How is this different to @Indigenuity's answer? – Triple 2/11, 2015 at 8:51

@ian Kemp overflow: hidden != overflow-x: hidden – Subarctic 19/11, 2015 at 10:2

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!

Arty answered 23/3, 2013 at 3:46 Comment(0)

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)

Prophetic answered 23/7, 2015 at 16:26 Comment(0)

easiest way to solve this , add

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Adamina answered 15/6, 2021 at 15:11 Comment(1)

You should absolutely never prevent the user from zooming. – Indigoid 20/2, 2022 at 21:11

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

Frenum answered 16/12, 2015 at 14:45 Comment(0)

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

Gama answered 9/6, 2016 at 12:8 Comment(0)

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.

Commander answered 24/11, 2019 at 15:0 Comment(0)

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.

Preview answered 14/1, 2017 at 10:0 Comment(0)

Solution that properly work for mobile device with flex positionning top :

html,body {
    width: 100%;
    margin: 0;
    padding: 0;
}

and in web page :

  <meta name="viewport" content="width=device-width, user-scalable=0">

Don't forget to positioning this css in the different webpage main divs :

height : auto !important;

Leila answered 17/8, 2022 at 17:54 Comment(0)

html, body{ overflow-x: hidden; position: relative; } Just try like this where you have added the overflow-hidden.

Equalizer answered 4/9, 2022 at 5:8 Comment(0)

Setting overflow-x to 'clip' instead of 'hidden' also prevents unwanted scrolling on touch-devices, with wacom-pens, with shift-scrollwheel or any other programmatic scrolling. On the downside, it also prevents programmatic scrolling with javascript.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip

Rouble answered 18/11, 2022 at 10:16 Comment(0)

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

Sacramentalism answered 12/8, 2016 at 6:28 Comment(0)

step 1: set position to fixed to the element that goes out from the viewport. In my case it is:

.nav-links {
    position:fixed;
    right:0px;
    background-color:rgba(0,0,0, 0.8);
    height:85vh;
    top:8vh;
    display:flex;
    flex-direction:column;
    align-items: center;
    width:40%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

Step2: add a css property to body and html as:

body, html{
    overflow-x:  hidden;
}

I didn't add any wrapper. Only these two steps worked for me. The project I am working on is an angular project.

Craner answered 17/10, 2021 at 21:15 Comment(0)

The following works

body,
.innerbodywrapper{
overflow-x: hidden;
position: fixed;
width: 100%;
height: 100vh;
}

Cohbert answered 17/1, 2022 at 10:46 Comment(0)

This issue was occurring in mobile Chrome browsers. Adding this to head fixed it for me:

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <style>
    html,
    body {
      width: 100%;
      overflow-x: hidden;
      position: relative;
    }
  </style>

Creating a div and applying these to it instead of body didn't change anything so I went with not having unnecessary elements.

Shewchuk answered 29/11, 2023 at 15:34 Comment(0)

.App {
  overflow: hidden;
  position: fixed;
}

This helped me. I wanted to avoid the vertical scrolling of a react App.

Dratted answered 19/12, 2023 at 2:15 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags