Indigenuity Indigenuity - 5 months ago 28
CSS Question

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?

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.

It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.

Comments