O comportamento de redimensionamento da barra de URL está mudando no Chrome para Android a partir da versão 56. Veja o que você precisa saber:
Os comprimentos definidos nas unidades da janela de visualização (ou seja, vh) não serão redimensionados em resposta
à exibição ou ocultação da barra de URL. Em vez disso, as unidades vh serão dimensionadas para a
altura da janela de visualização como se a barra de URL estivesse sempre oculta. Ou seja, as unidades vh serão
dimensionadas para a "maior janela de visualização possível". Isso significa que 100vh será maior que a altura visível quando a barra do URL for exibida.
O bloco de contenção inicial (ICB, na sigla em inglês) é a raiz que contém o bloco usado ao
dimensionar elementos em relação aos pais. Por exemplo, atribuir um estilo
width: 100%; height: 100% ao elemento <html> o tornará do mesmo tamanho que
o ICB. Com essa mudança, o ICB não é redimensionado quando a barra de URL está oculta.
Em vez disso, ela permanecerá na mesma altura, como se a barra de URL estivesse sempre sendo exibida ("menor janela de visualização possível"). Isso significa que um elemento dimensionado para a altura do ICB
não vai preencher completamente a altura visível enquanto a barra do URL estiver oculta.
Há uma exceção às mudanças acima: os elementos que são
position: fixed. O comportamento deles permanece inalterado. Ou seja, um elemento position:
fixed que tenha o bloco que contém o ICB será redimensionado em resposta à
barra de URL exibida ou oculta. Por exemplo, se a altura for 100%, ela sempre vai preencher
exatamente a altura visível, independentemente de a barra do URL ser mostrada ou não. Da mesma forma, para tamanhos
vh, eles também serão redimensionados para corresponder à altura visível, considerando a posição
da barra de URL.
Existem alguns motivos para essa mudança:
Blocos
vhutilizáveis em dispositivos móveis. Antes disso, o uso de unidadesvhsignificava que uma página era reorganizada de forma estranha toda vez que o usuário mudasse a direção de rolagem.Melhor experiência do usuário. Se uma página sofrer reflow enquanto o usuário estiver lendo, ele poderá perder a localização relativa no documento. Isso é frustrante, mas também incorre em uso extra do processador e consumo de bateria para recriar o layout e repintar a página.
Melhoramos a interoperabilidade com o Safari no iOS. O novo modelo precisa corresponder ao comportamento do Safari, facilitando a vida dos desenvolvedores Web. A escolha não intuitiva de tornar as unidades
vha maior janela de visualização possível, mas o ICB o menor possível é corresponder ao comportamento do Safari.
Em cenários de tela cheia, em que a barra de URL fica bloqueada em um estado oculto, o ICB usa a altura da tela cheia. Isso é consistente com as definições acima, já que a "menor janela de visualização possível" será a janela de visualização completa, já que a barra do URL não aparece na rolagem.
Demonstração
- Aqui está uma demonstração.
As quatro barras à direita da página são combinações possíveis de
99%,99vh,position:fixedeposition:absolutefornecidas em uma página rolável. Ocultar a barra de URL mostra como isso afeta cada um deles. Os eventos de redimensionamento são impressos na página.
Suporte
- Chrome 56 no Android.