Setting an element outside of window horizontally enlarges window size

Hi,

I found a strange behavior. If you set style.left of an element to outside of window, the browser enlarges window's innerWidth and innerHeight.

Only if you disable "manual zoom" and set viewport user-scalable to no, it works as expectedly.

<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
  <style>
    body {
      margin: 0;
    }
    .square {
      position: relative;
      width: 50vw;
      height: 50vh;
      background: blue;
    }
  </style>
  <body>
    <div class="square">
    <script>
      const { innerHeight, innerWidth } = window
      console.log(
        window.innerHeight,
        window.innerHeight / innerHeight,
        window.innerWidth,
        window.innerWidth / innerWidth
      ); // => 564 1 412 1

      const e = document.querySelector('.square');
      e.style.left = '375vw';
      e.style.top = '0';

      console.log(
        window.innerHeight,
        window.innerHeight / innerHeight,
        window.innerWidth,
        window.innerWidth / innerWidth
      ); // => 2256 4 1648 4
    </script>
  </body>
</html>

If you set left: 375vw in style, initially window size is 4 times larger than device size.
Oddly enough, the maximum rate seems 4 in my environment.

Environment: Samsung Internet 9.2.10.15 Nexus 5X / Android 7.1.2

SamsungInternet / support

Setting an element outside of window horizontally enlarges window size #94