Let’s say you have a navigation bar that slides in from the left. When the navbar is not active, you want to translate it into view.

When it’s not in the view, you want to keep it on the side. But you don’t want the user to be able to scroll to it. This is where overflow-x: hidden is useful.

On desktop, everything works fine but on mobile devices, the user can zoom out and view the hidden navbar on the side. For me it also caused a weird issue where the navbar was showing up in the view as certain viewport widths.

Solution: Firstly, I put the property on both body and html:

  html,
  body {
    overflow-x: hidden;
  }

Secondly, I used the following meta tag in my html

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

This solved the issue with the weird overflow issues with my navbar.