Em novembro, com o lançamento do Chrome 108, o Chrome fará algumas mudanças no comportamento da janela de visualização do layout quando o teclado na tela (OSK, na sigla em inglês) for exibido. Com essa mudança, o Chrome no Android não vai mais redimensionar a janela de visualização de layout. Em vez disso, apenas a janela de visualização visual será redimensionada. Com isso, o comportamento do Chrome no Android será igual ao do Chrome no iOS e no 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.
A janela de visualização de layout e a janela de visualização visual
Ao visitar um site, você não vê o conteúdo de toda a página depois que ela é carregada. Em vez disso, o navegador oferece uma janela de visualização pela qual é possível ver uma parte da página. Essa janela de visualização também é conhecida como janela de visualização do 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. À medida que a janela de visualização do layout permanece no lugar quando você rola uma página para baixo, o mesmo acontece com os elementos que usam position: fixed.
position: fixed (caixas azuis). São exibidos (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. Ele 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 do layout.
Ao fazer gesto de pinça, você reduz o tamanho da janela de visualização visual em relação à janela de visualização do layout.
Comportamento de redimensionamento da janela de visualização
Ao focar uma entrada ou qualquer outra área editável, os dispositivos (principalmente dispositivos com tela touch) 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:
- 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 de layout.
- Não redimensione a janela de visualização do layout ou a janela de visualização visual, sobrepondo o teclado virtual sobre ambas.
Esses três comportamentos são visualizados da seguinte maneira:
Dependendo da combinação de navegador e sistema operacional que o visitante usa, um dos comportamentos é usado e foge do seu controle.
Mapeamento dos vários comportamentos de redimensionamento
Na parte Esforço de investigação da janela de visualização da Interoperabilidade de 2022, vários aspectos relacionados à janela de visualização foram investigados para cada grande combinação de navegador e SO.
Um dos aspectos testados é o comportamento de redimensionamento quando o OSK é exibido. 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 Chrome OS
- Chrome no iOS
- Chrome no iPadOS
- Edge no iOS
- Edge no iPadOS
Grupo 2
Navegadores que redimensionam a janela de visualização visual e a janela de visualização do 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 VirtualKeyboard.
Efeitos colaterais de cada comportamento
Essa diferença na forma como as várias janelas de visualização são redimensionadas quando a tela exibida é exibida cria um layout e um comportamento de dimensionamento não interoperáveis dos sites.
Nos navegadores do grupo 1, com o OSK exibido:
- 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 obscurecidos pelo OSK.
Nos navegadores do grupo 2, com o OSK exibido:
- Os valores calculados para unidades relativas à janela de visualização são reduzidos.
- Os elementos projetados para ocupar todo o espaço visual diminuem.
- Elementos que usam
position: fixedpodem acabar em outro lugar no layout.
position: fixed (caixas azuis). São mostradas as imagens do Safari no iOS (à esquerda) e do Chrome no Android (no centro e na direita).
A menos que você recorre à detecção de um user agent ou dependa de scripts extensivos, não será possível saber qual comportamento é usado. Também não é possível alterar o comportamento, já que ele é determinado pela combinação de navegador e sistema operacional do qual o usuário está visitando.
Alteração do 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 do layout quando o teclado na tela for mostrado.
Isso vai alinhar o comportamento do Chrome no Android ao Chrome no iOS, iPadOS, Windows e CrOS, Safari no iOS e iPadOS e Edge para iOS, iPadOS e Windows.
Graças a essa mudança, os autores poderão saber qual comportamento será usado, independentemente do sistema operacional em que 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 quiser que seu site use o comportamento de redimensionamento anterior a 108, não se preocupe. O envio no Chrome 108 também é uma extensão da metatag da janela de visualização.
Com a tecla 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 de layout.resizes-content: redimensiona a janela de visualização visual e a de layout.overlays-content: não redimensiona nenhuma janela de visualização.
Para reativar o comportamento "antigo" do Chrome no Android, defina a metatag da janela de visualização como:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Se você não incluir interactive-widget na metatag da janela de visualização, o Chrome usará o comportamento padrão, que é resizes-visual.
Na visualização, 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 (em inglês).
Testes e feedback
Esperamos que haja algumas pequenas diferenças em relação aos sites existentes, mas esperamos que eles não bloqueiem, já que o Chrome 108 no Android se comportará de maneira semelhante ao Safari no iOS. Portanto, sites que funcionam bem no Safari no iOS também vão funcionar no Chrome 108 no Android.
No entanto, incentivamos os autores de sites a testar ativamente os sites no Chrome 108, que está na 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.
O feedback pode ser enviado em crbug.com. Não se esqueça de incluir "teclado na tela" no título do relatório.