Unexpected scrollbars appearing in mobile version of a website

by

1. Setup:

<!-- styles -->
<style>
  body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
  }

  .square {
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>

<!-- body -->
<body>
  <div class="square"></div>
</body>

2. Add the following CSS properties to .square:

position: absolute;
left: 100%;
top: 0;

3. Observe the page in the browser:

If you view it from the desktop view, it works as expected (the page is empty, no scrollbars appearing and no scrolling can be done).

Open DevTools, then click “Toggle devices toolbar” (ctrl + shift + m). Now, try scrolling right. You will see the red square. You can also scroll down for some reason.
screenshot (notice the overflow:hidden applied to body) – on this screenshot page is already scrolled to the right.

Also, if you change left: 100% to right: 100% it works as expected. Same works for transition: translateX().

deployed version

The same behavior was observed on Edge (desktop, with device toolbar on), Samsung Internet and Chrome (mobile). I also checked this via BrowserStack: the issue persisted on Chrome v90, 101 and 105.

Chrome desktop version: 120.0.6099.130 (Official Build) (64-bit) (cohort: Stable)

Chrome mobile version: 120.0.6099.144 (Official Build) (64-bit)

Looks like an issue with Chrome’s inspector. There’s nothing wrong with your code, which works fine everywhere except in Chrome’s inspector.

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  overflow: hidden;
}

.square {
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  left: 100%;
  top: 0;    
}
<div class="square"></div>

Leave a Comment