TransWikia.com

Ao entrar no full screen em iframe faz a página rolar para cima

Stack Overflow em Português Asked by Costamilam on September 27, 2021

Eu estou criando uma página que será utilizada como um iframe em outras aplicações, para testar como ela se comportava em diferentes tamanhos, criei uma página e adicionei diversos iframes para a página que estava fazendo, porém com tamanhos diferentes.

Nessa página há uma opção "Fullscreen" que entra em modo tela cheia, ao entrar em tela cheia e depois sair, mesmo sem navegar pelo iframe, a página que embeda o iframe rola um pouco para cima, esse comportamento ocorre apenas testando diretamente no celular, no desktop, mesmo emulando um mobile, isso não ocorre

Para entender o que poderia estar fazendo isso, fiz um teste com o mínimo para iniciar o fullscreen, criei uma pagina com apenas um iframe:

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

Conteúdo do iframe em base64:

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

Fiz os mesmos testes, recarreguei a página, rolei para baixo, cliquei no botão e saí do fullscreen (tecla "esc" no desktop e o voltar do Android), dessa fez, sempre (mobile, desktop e desktop emulando mobile) rolava a página para cima

Fiz mais alguns testes para verificar se o código que inicia o fullscreen, alguma meta tag ou o estilo do html e do body poderiam afetar esse comportamento, porém, os resultados continuaram igual

Testei em Android com o Chrome 83 e em Linux com Chromium 83

A página que estou criando ocupa sempre 100% do tamanho do device, nenhum pixel a mais ou a menos, então ela não possui scroll, todos os elementos possuem o position: fixed ou seu container o possui. O código que controla o fullscreen é esse:

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()
}

O que causa e como impedir esse rolamento na página que embeda o iframe?

One Answer

Uma possível solução será:

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

e no css:

iframe {
  overflow: hidden;
}

Answered by Guilherme Pereira on September 27, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP