blog

Using overflow: hidden on a <body> tag

Today, I opened curly quote on my phone and noticed a horizontal scroll present. I have some content that’s hidden from the viewport but I also have overflow-x: hidden to prevent the scrollbar from appearing.

Solution 1

But per StackOverflow, some mobile browsers ignore overflow: hidden when applied on <body> tag while <meta name="viewport"> is present.

The solution was to wrap the whole page in an additional element and apply overflow-x: hidden to it.

And since my overflowing element was absolutely positioned relative to the viewport, I also had to add position: relative style to make it work.

Solution 2

Some additional search provided this gist with an alternative approach (which suggests mobile viewport theory is wrong and the underlying cause is something else).

html, 
body {
    height: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
}