35

I hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on the tablet viewport (and probably smartphone too, havent tested that yet)

Despite the body having body {overflow-x:hidden;} which works fine within normal browsers on the pc, i am able to move to the side for about 25 pixels or so, cause thats the overflow of my rotated div, that sticks out of the screen, which i wanted to hide.

Is there a way to fix this? I supplied below part of the head and html / css

The viewport meta tag.

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

The CSS applied to the media queries and they respective elements that overflow

@media only screen and (max-width: 992px){
    #skills, #experience    {overflow-x:hidden;}
}
@media (max-width: 479px){
    body                    {overflow-x:hidden;}
}

And the regular CSS applied to the html / body tags

body, html  {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}

The id's #skills and #experience have a class called .hoek which is defined as followed and causes the overflow.

    .hoek    {margin: 0 -50px; 
              -webkit-transform-origin:left center; 
              -moz-transform-origin:left center; 
              -o-transform-origin:left center; 
              -ms-transform-origin:left center;
              margin-top: -175px;                       
              -webkit-transform:rotate(5deg); 
              -moz-transform:rotate(5deg); 
              -o-transform:rotate(5deg); 
              -ms-transform:rotate(5deg);
              z-index: 20;
    }

I must point out, I think, that the #skills and #experience are sections and not divs. I am not sure if that might be a problem within the code, but I thought not. If there is anymore information that is needed, please let me know, but I thought I had covered the bases here.

I dont know where to begin with a fiddle, so I supply you just the test link of the site: http://www.jellyfishwebdesign.nl/Joost/index.php

Dorvalla
  • 5,027
  • 4
  • 28
  • 45

12 Answers12

64

Found the answer actually here on Stack overflow:

The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden in it, solving the problem.

Documentation:

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

The bad thing is that it prevents the use now of a jquery plugin, that scrolls....

Anand Bhushan
  • 765
  • 8
  • 18
Dorvalla
  • 5,027
  • 4
  • 28
  • 45
  • 1
    Well this is a topic out of 2014 with my website in thought, i have no clue how yours looks like and your comment is not very constructive here, make a new topic and i may be able to help you there. – Dorvalla Aug 02 '19 at 12:08
  • 3
    Nothing personal here. This is the **chosen** answer, so when a programmer arrives here from Google it's important for them to see they're not alone. Pretty naturally, the most recent answer worked for me so I made sure to highlight it as well for future generations. – GalAbra Aug 03 '19 at 06:17
37

Try setting minimum-scale=1 instead of maximum-scale=1.

minimum-scale controls how far out the user can zoom, while maximum-scale controls how far in they can zoom. To prevent viewing of the overflow you need to limit the user's ability to zoom out, not in.

feidtmb
  • 1,017
  • 9
  • 5
  • Didn't work for me, it pushed the scroll to the very right. And I could not scroll to the left anymore. – Avatar May 02 '21 at 12:50
19

I had this same problem and tried applying body with overflow-x: hidden;, and lots of other answers, but what did work in my Wordpress, was applying a global CSS rule as below.

body, html {
overflow-x: hidden;
}

This eliminates the movement left to right on mobiles. The HTML part is needed, not just body!

dippas
  • 58,591
  • 15
  • 114
  • 126
Mikeys4u
  • 1,494
  • 18
  • 26
16

As pointed out by Dorvalla, body and html tags are ignored by smartphones browsers, although not by "big screen" browsers, I solved the issue by using the first child of the page structure, so no need of an aditional wrapper.

e.g. for my WordPress case:

    .site {
        overflow-x: hidden;
        /* Unnecessary IMHO, uncomment next line to force hidden behavior */
        /* overflow-x: hidden !important; */
        /* Additional tunning proposed by the community */
        position: relative;
        width: 100%;
    }
Adrià
  • 356
  • 2
  • 7
7

if you applied overflow-x:hidden to the body, you might wanna apply to html too.

body,html {
  overflow-x:hidden;
}
YourBrainEatsYou
  • 979
  • 6
  • 16
apollovishwas
  • 117
  • 1
  • 2
  • Actually in this case, 5 years ago, had to do (and i am not sure if this is still the case) is that mobile browser ignore the overflow propperty on the html and body tag. See my own awnser below in this post. – Dorvalla Jun 04 '20 at 12:54
7

Try setting minimum-scale=1 instead of maximum-scale=1 or initial-scale=1.

eg.

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

MJBZA
  • 4,796
  • 8
  • 48
  • 97
Soumen Khara
  • 128
  • 3
  • 5
  • 1
    Wow! This fixed two of my bugs : ) I was being forced to choose between position sticky for my header and overflow-x hidden on the HTML. – Costa Michailidis Aug 20 '21 at 08:04
5

My analysis as of September 2021. Tested on Safari and Firefox 37 (iOS 15).

The accepted answer and its SO link are pretty old (2013-2014) and do not seem valid any more.
Also, I find that adding a "wrapping" div on my body is not really elegant and could lead to unexpected behaviour.

The page on which I am working on is pretty simple, there is just one background image that might overflow on the right of the screen for smaller screens.

  • Applying minimum-scale=1 to the viewport meta tag did not work. This prevents zooming out, but I could still have this ugly scroll on the right.
  • Applying overflow-x: hidden; on <html> only did not work.
  • Applying overflow-x: hidden; on <body> only did not work.
  • Applying overflow-x: hidden; on both <html> & <body> did work.
pierre_loic
  • 141
  • 1
  • 7
  • Funny, it comes down to the fact that apparently browser companies dont bother fixing this (or it has always been intended that mobile browsers exclude these css properties on those tags). Nice to see that this threat evolve on that. – Dorvalla Sep 23 '21 at 14:09
  • Well, it still does not fix the problem. Was having the issue on a WP Avada theme one page landing page. Applied the meta= view port to initial, minimum and maximum scale to 1. And set overflow-x:hidden for both body and html. But still not solving the issue at smaller devices. – Lenin Nov 26 '21 at 07:50
3

This can be resolved without needing to include minimum-scale=1. While that property does prevent the user from zooming and scrolling out, it doesn't resolve the issue of the horizontal scrollbar still appearing, regardless of the fact that the user can't use it.

The way I resolved this issue was by having the following viewport.

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

Next, you need to make sure that your html and body elements have the following properties...

html {
  ...
  overflow-x: hidden;
}

body {
  ...
  position: relative;
  overflow-x: hidden;
}

These properties should make it so that any type of horizontal overflow doesn't show, nor will the horizontal scrollbar be present. This also allows you to lock page-scroll in case of a modal or some other reason on both mobile and desktop by simply passing overflow: hidden to the html element.

ekfuhrmann
  • 1,639
  • 11
  • 12
1

If you are using tailwind css in next js and you are using a function to display or hide the sidemenu then it will works for you.

const toggleCart = () => {
    if (ref.current.classList.contains("hidden")) {
      ref.current.classList.remove("hidden");
      ref.current.classList.add("translate-x-0");
    } else if (!ref.current.classList.contains("hidden")) {
      ref.current.classList.add("hidden");
    }
  };

Set the sidebar or your div initially hidden and will works fine in your phone. Don't use translate-x-full. It will cause the overflow in mobile device in my case

fardeen awais
  • 21
  • 2
0

I found that applying:

overflow-x: hidden

to the div wrapper inside the body made the scrolling a little jumpy on iOS Safari so therefore just gave it overflow: hidden and left the body as visible. This worked perfect for me in all browsers and devices I needed.

Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
UXMike
  • 31
  • 3
0

Even though you are creating a parent container to apply the overflow: hidden; , the overflow property will not work on position: absolute;. Because position absolute moves the targeted element out of context with the document structure. It has to be position: relative;

DexteR
  • 21
  • 2
-2

Had the same kind of problem with a toggle menu for mobile users, put it off screen so it would appear when the user clicked on the menu bar, solved applying overflow-x:hidden to my section tag.

Grandnork
  • 1
  • 2