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?