Em novembro, com o lançamento do Chrome 108, o Chrome vai fazer algumas mudanças na forma como o Layout Viewport se comporta quando o teclado na tela (OSK) é mostrado. Com essa mudança, o Chrome no Android não vai mais redimensionar a janela de visualização de layout, e sim apenas a janela de visualização visual. Isso vai deixar o comportamento do Chrome no Android igual ao do Chrome no iOS e do Safari no iOS.
Confira mais informações sobre o que está acontecendo, por que o Chrome está fazendo essa mudança e o que você pode fazer para se preparar.
Janela de visualização de layout e janela de visualização visual
Ao visitar um site, você não consegue ver o conteúdo da página inteira depois que ela é carregada. Em vez disso, o navegador oferece uma janela de visualização para que você possa ver uma parte da página. Essa viewport também é conhecida como viewport de layout. Quando o conteúdo de uma página fica muito grande, o navegador oferece um mecanismo de rolagem.
Ao posicionar elementos usando position: fixed, eles serão dispostos em relação à viewport de layout. Como a janela de visualização de layout permanece no lugar enquanto você rola para baixo em uma página, os elementos que usam position: fixed também permanecem.
position: fixed (caixas azuis). As imagens mostram (da esquerda para a direita) o Safari no iPhone, o Chrome no Android e o Firefox no Android.
Além desse layout, o navegador também oferece uma janela de visualização visual. Ela representa a parte da janela de visualização que está visível no momento. No nível de zoom 1, essa janela de visualização visual é do mesmo tamanho que a janela de visualização do layout.
Ao fazer zoom in, você reduz o tamanho da janela de visualização visual em relação à janela de visualização de layout.
Comportamento de redimensionamento da janela de visualização
Ao focar uma entrada ou qualquer outra área editável, os dispositivos, principalmente os com tela touchscreen, podem mostrar um teclado na tela. Esse teclado, muitas vezes chamado de teclado virtual,permite que os usuários insiram conteúdo na área editável.
Ao fazer isso, os navegadores respondem de uma das seguintes maneiras em relação às várias viewports:
- Redimensione apenas a janela de visualização visual e desloque a janela de visualização de layout.
- Redimensione a janela de visualização visual e a janela de visualização de layout.
- Não redimensione nenhuma das janelas de visualização de layout ou visual, sobrepondo o teclado virtual em cima de ambas.
Esses três comportamentos são visualizados da seguinte maneira:
Dependendo da combinação de navegador e SO que um visitante usa, um dos comportamentos é usado, fora do seu controle.
Como mapear os vários comportamentos de redimensionamento
No esforço de investigação de viewport, parte da Interop 2022, vários aspectos relacionados a viewport foram investigados para todas as principais combinações de navegadores e SOs.
Um dos aspectos testados é o comportamento de redimensionamento quando a OSK é mostrada. Isso levou à seguinte classificação:
Grupo um
Navegadores que redimensionam a janela de visualização visual, deixando a janela de visualização de layout intacta.
- Safari no iOS
- Safari no iPadOS
- Chrome no ChromeOS
- Chrome no iOS
- Chrome no iPadOS
- Edge no iOS
- Edge no iPadOS
Grupo dois
Navegadores que redimensionam a janela de visualização visual e a janela de visualização de layout.
- Chrome no Android
- Firefox no Android
- Edge no Android
- Firefox no iOS
Grupo três
Navegadores que não redimensionam nenhuma das janelas de visualização:
- Nenhum por padrão: no Chrome para Android, é possível ativar esse comportamento usando a API VirtualKeyboard.
Efeitos colaterais de cada comportamento
Essa diferença na forma como as várias visualizações são redimensionadas quando o OSK é mostrado leva a um comportamento de layout e dimensionamento não interoperável dos sites.
Nos navegadores do grupo 1, com a OSK mostrada:
- Os valores calculados para unidades relativas à viewport permanecem os mesmos.
- Os elementos que foram projetados para ocupar todo o espaço visual mantêm o tamanho.
- Os elementos que usam
position: fixedpermanecem no lugar e podem ser obscurecidos pelo OSK.
Nos navegadores do grupo 2, com a OSK mostrada:
- Os valores computados para unidades relativas ao viewport são reduzidos.
- Os elementos que foram projetados para ocupar todo o espaço visual são reduzidos.
- Os elementos que usam
position: fixedpodem acabar em outro lugar do layout.
position: fixed (caixas azuis). As imagens mostram o Safari no iOS (à esquerda) e o Chrome no Android (centro e à direita).
A menos que você recorra ao sniffing do User-Agent ou dependa de scripts extensos, não é possível saber qual comportamento é usado. Também não é possível mudar o comportamento, já que ele é determinado pela combinação de navegador e SO que o usuário está usando.
Como mudar o comportamento padrão no Chrome 108
A partir do Chrome 108, o Chrome no Android vai ajustar o comportamento de redimensionamento da janela de visualização para não redimensionar mais a janela de visualização de layout quando o teclado na tela for mostrado.
Isso vai alinhar o comportamento do Chrome no Android com o do Chrome no iOS, iPadOS, Windows e CrOS, Safari no iOS e iPadOS e Edge no iOS, iPadOS e Windows.
Graças a essa mudança, os autores podem saber qual comportamento será usado, não importa em qual SO o Chrome está sendo executado. Além disso, ele permite unidades estáveis relativas à viewport: mostrar ou ocultar o teclado na tela não afeta essas unidades.
.Ativar um comportamento diferente
Se você quiser que seu site use o comportamento de redimensionamento anterior à versão 10.8, não se preocupe. O Chrome 108 também inclui uma extensão para a metatag viewport.
Com a chave interactive-widget, você pode informar ao Chrome qual comportamento de redimensionamento você quer.
Os valores aceitos para interactive-widget são:
resizes-visual: redimensiona apenas a janela de visualização visual, mas não a janela de visualização de layout.resizes-content: redimensione a janela de visualização visual e a janela de visualização de layout.overlays-content: não redimensiona nenhuma janela de visualização.
Para voltar ao comportamento "antigo" do Chrome no Android, defina a metatag de viewport como esta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Se você não incluir interactive-widget na metatag viewport, o Chrome vai usar o comportamento padrão, que é resizes-visual.
Visualizadas, as configurações têm este efeito nas várias janelas de visualização:
resizes-visual, resizes-content e overlays-content.
Teste o efeito de cada valor no seu navegador neste site de demonstração.
Testes e feedback
Esperamos algumas pequenas diferenças nos sites atuais, mas elas não vão bloquear o conteúdo, já que o Chrome 108 no Android vai se comportar de forma semelhante ao Safari no iOS. Portanto, os sites que funcionam bem no Safari no iOS também devem funcionar bem no Chrome 108 no Android.
No entanto, recomendamos que os autores de sites testem ativamente os sites no Chrome 108, que está na versão Beta desde 27 de outubro de 2022. Procure especificamente elementos que usam position: fixed e/ou dependem de unidades relativas à viewport.
O feedback pode ser enviado em crbug.com. Inclua "teclado na tela" no título do relatório.