2

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?

6
  • Porém quando eu fiz o teste, criando uma pagina e colocando apenas o seu iframe, esse comportamento não ocorreu: pasteboard.co/JhYVNyT.gif
    – user162488
    Commented 16/07/2020 às 23:07
  • Aqui está a página que criei para testar o seu iframe: pasteboard.co/JhYWSLO.png
    – user162488
    Commented 16/07/2020 às 23:10
  • Talvez você precise colocar mais algumas informações para eu poder reproduzir esse comportamento, como HTML e CSS.
    – user162488
    Commented 16/07/2020 às 23:20
  • @CahianR.Freire provavelmente por causa da versão do navegador ou do OS, eu testei no Chromium 83 no Linux Mint 19.3. O que é estranho, já que tornaria esse comportamento instável/incontrolável
    – Costamilam
    Commented 17/07/2020 às 14:00
  • Eu acredito que é muito improvável que a versão do navegador ou sistema operacional esteja fazendo com que o comportamento de rolar a página para cima não ocorra, pois eu fiz esse mesmo teste em mais 4 navegadores (chrome, firefox, opera e brave) e 2 sistemas operacionais (linux e windows). Acredito que o problema não esteja no iframe e sim na página em que você está colocando esse iframe.
    – user162488
    Commented 17/07/2020 às 15:04

1 Resposta 1

-1

Uma possível solução será:

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

e no css:

iframe {
  overflow: hidden;
}
2
  • O atributo scrolling está obsoleto e o iframe não tem overflow
    – Costamilam
    Commented 17/07/2020 às 14:02
  • @Costamilam podes testar por um return false; a seguir à chamada do onclick="document.documentElement.requestFullscreen()" onclick="document.documentElement.requestFullscreen(); return false;", se conseguisses por um exemplo no jsfiddle por exemplo, não consigo reproduzir o erro. Commented 17/07/2020 às 15:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .