Em novembro, com o lançamento do Chrome 108, o Chrome fará algumas mudanças na forma como a janela de visualização do layout se comporta quando o teclado na tela (OSK, na sigla em inglês) é exibido. Com essa mudança, o Chrome no Android não redimensionará mais a janela de visualização do layout. Em vez disso, apenas a janela de visualização visual será redimensionada. 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 vê todo o conteúdo da página depois que ela é carregada. Em vez disso, o navegador oferece uma janela de visualização pela qual você pode 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 à janela de visualização do layout. Como a viewport de layout permanece no lugar ao rolar 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 dessa janela de visualização de 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, geralmente conhecido como 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 à 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 1
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 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 no Android, é possível ativar esse comportamento usando a API VirtualTeclado (em inglês).
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 o OSK exibido:
- 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 à detecção do user agent ou dependa de scripts extensos, não será 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 sistema operacional do usuário.
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, independentemente do SO em que 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.
É possível testar o efeito de cada valor no seu navegador neste site de demonstração.
Testes e feedback
É normal que haja algumas pequenas diferenças em relação aos sites já criados, mas o esperado é que não haja bloqueio por parte deles, já que o Chrome 108 no Android terá um comportamento semelhante ao do Safari no iOS. Portanto, sites que funcionam bem no Safari no iOS também funcionam no Chrome 108 no Android.
No entanto, incentivamos os criadores a testar os sites no Chrome 108, que está em versão Beta a partir de 27 de outubro de 2022. Procure especificamente elementos que usam position: fixed e/ou dependem de unidades relativas à janela de visualização.
É possível enviar feedback em crbug.com. Inclua "teclado na tela" no título do relatório.