Em novembro, com o lançamento do Chrome 108, o Chrome vai fazer algumas mudanças no comportamento da janela de visualização de layout quando o teclado na tela (OSK, na sigla em inglês) for mostrado. Com essa mudança, o Chrome no Android não vai mais redimensionar a janela de visualização de layout, 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 algumas 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 que mostra uma parte da página. Essa janela de visualização também é conhecida como janela de visualização 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 a essa janela de visualização de layout. Como a janela de visualização de layout permanece no lugar quando você rola uma página para baixo, os elementos que usam position: fixed também permanecem.
position: fixed (caixas azuis). Mostrados (da esquerda para a direita) Safari no iPhone, Chrome no Android e 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 é tão grande quanto a janela de visualização de layout.
Ao aumentar o zoom, 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 em uma entrada ou em qualquer outra área editável, os dispositivos, principalmente os com tela touch screen, podem mostrar um teclado na tela. Esse teclado, geralmente 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 janelas de visualização:
- Redimensionar apenas a janela de visualização visual e deslocar a janela de visualização de layout.
- Redimensionar as janelas de visualização visual e de layout.
- Não redimensiona a janela de visualização de layout nem a janela de visualização visual, sobrepondo o teclado virtual em 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, além do seu controle.
Como mapear os vários comportamentos de redimensionamento
No Viewport Investigation Effort, parte do Interop 2022, vários aspectos relacionados à janela de visualização foram investigados para cada combinação de navegador e SO.
Um dos aspectos testados é o comportamento de redimensionamento quando o OSK é mostrado. Isso levou à seguinte classificação:
Grupo um
Navegadores que redimensionam a janela de visualização visual, deixando a janela de visualização de layout intocada.
- 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 as janelas de visualização visual e 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 janelas de visualização 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 mostrado:
- Os valores calculados para unidades relativas à janela de visualização permanecem os mesmos.
- Os elementos projetados para ocupar todo o espaço visual mantêm o tamanho.
- Os elementos que usam
position: fixedpermanecem no lugar e podem ser ocultados pelo OSK.
Nos navegadores do grupo 2, com o OSK mostrado:
- Os valores calculados para unidades relativas à janela de visualização diminuem.
- 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 no layout.
position: fixed (caixas azuis). Mostrados são o Safari no iOS (à esquerda) e o Chrome no Android (no centro e à direita).
A menos que você use a detecção de user agent ou 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.
Mudança no 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 ao do Chrome no iOS, iPadOS, Windows e CrOS, do Safari no iOS e iPadOS e do 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 esteja sendo executado. Além disso, ele permite unidades estáveis relativas à janela de visualização: mostrar ou ocultar o OSK não afeta essas unidades.
.Ativar um comportamento diferente
Se você quiser que seu site use o comportamento de redimensionamento anterior à versão 108, 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 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: redimensiona 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 viewport como:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=r>esizes-content"
Se você não incluir interactive-widget na metatag viewport, o Chrome vai usar o comportamento padrão, que é resizes-visual.
Visualmente, 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 navegador neste site de demonstração.
Testes e feedback
Esperamos algumas pequenas diferenças nos sites atuais, mas elas não devem ser um problema, já que o Chrome 108 no Android agora vai se comportar de maneira 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 usem position: fixed e/ou dependam de unidades relativas à janela de visualização.
O feedback pode ser enviado em crbug.com. Inclua "teclado na tela" no título do relatório.