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).