Entering the full screen in iframe makes the page scroll up

Question

I’m creating a page that will be used as an iframe in other applications, to test how it behaved in different sizes, created a page and added several iframes to the page I was making, but with different sizes.

On this page there is an option "Fullscreen" that goes into full screen, when entering full screen and then leaving, even without navigating the iframe, the page that embeds the iframe scrolls up a little, this behavior occurs just testing directly on the mobile, on the desktop, even emulating a mobile, this does not occur

To understand what could be doing this, I did a test with the minimum to start fullscreen, created a page with only one iframe:

<iframe
  src="data:text/html;base64,PGJ1dHRvbiBvbmNsaWNrPSJkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQucmVxdWVzdEZ1bGxzY3JlZW4oKSI+ZnM8L2J1dHRvbj4="
  frameborder="0"
  allowfullscreen
  style="margin: 50vh 10%; width: 80%; height: 35vh;"
></iframe>

Contents of iframe in Base64:

<button onclick="document.documentElement.requestFullscreen()">fs</button>

I did the same tests, reloaded the page, rolled down, clicked on the button and left the fullscreen ("Esc" key on the desktop and the back of Android), this made, always (mobile, desktop and desktop emulating mobile) scrolled the page up

I did some more tests to check if the code that starts fullscreen, some meta tag or the style of html and body could affect this behavior, however, the results remained the same

I tested on Android with Chrome 83 and Linux with Chromium 83

The page I’m creating always occupies 100% of the size of the device, no pixel more or less, so it has no scroll, all elements have the position: fixed or your container has it. The code that controls fullscreen is this:

const requestFullscreen =
  document.documentElement.requestFullscreen ||
  document.documentElement[
    Object.keys(document.documentElement).find(key =>
      key.endsWith("RequestFullscreen")
    )
  ]

function force() {
  if (document.fullscreenElement === null) setTimeout(() => enter(), 500)
}

function enter() {
  if (document.fullscreenEnabled && requestFullscreen)
    requestFullscreen
      .call(document.documentElement)
      .then(() => force())
      .catch(() => force())
}

const exitFullscreen =
  document.exitFullscreen ||
  document[
    Object.keys(document).find(
      key => key.endsWith("ExitFullscreen") || key.endsWith("CancelFullscreen")
    )
  ]

function exit() {
  if (exitFullscreen) exitFullscreen.call(document)
}

function toggle() {
  document.fullscreenElement !== null ? exit() : enter()
}

What causes and how to prevent this bearing on the page that embeds the iframe?

Answer 1

A possible solution will be:

<iframe src="" scrolling="no"></iframe>

and in css:

iframe {
  overflow: hidden;
}