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 em unidades da janela de visualização (por exemplo, vh) não serão redimensionados em resposta
à barra de URL sendo mostrada ou ocultada. Em vez disso, as unidades vh serão dimensionadas de acordo com a
altura da janela de visualização como se a barra de URL estivesse sempre oculta. Ou seja, as unidades de vh serão
dimensionadas de acordo com a "maior janela de visualização possível". Isso significa que 100vh será maior
do que a altura visível quando a barra de URL for mostrada.
O bloco de contenção inicial (ICB, na sigla em inglês) é o bloco raiz usado ao
dimensionar elementos relativos aos pais. Por exemplo, fornecer ao elemento <html>
um estilo width: 100%; height: 100% fará com que ele tenha o mesmo tamanho que
o ICB. Com essa mudança, o ICB não vai ser redimensionado quando a barra do URL estiver oculta.
Em vez disso, a altura dela vai continuar igual, como se a barra de URL estivesse sempre sendo exibida
("menor janela de visualização possível"). Isso significa que um elemento dimensionado de acordo com a altura do ICB
não vai preencher completamente a altura visível enquanto a barra de URL estiver oculta.
Há uma exceção para as mudanças acima, que é para elementos que são
position: fixed. O comportamento delas permanece inalterado. Ou seja, um elemento position:
fixed com um bloco que contém o ICB vai 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, mesmo que a barra de URL não seja exibida. Da mesma forma, para comprimentos de vh, eles também são redimensionados para corresponder à altura visível, considerando a posição da barra do URL.
Existem alguns motivos para essa mudança:
Unidades de
vhutilizáveis em dispositivos móveis. Antes disso, o uso de unidadesvhsignificava que uma página apresentava um reflow de forma irregular sempre que o usuário mudava a direção de rolagem.Experiência do usuário aprimorada. Se uma página passar por um reflow enquanto o usuário estiver lendo, ele poderá perder o local relativo no documento. Isso é frustrante, mas também incorre em uso adicional do processador e consumo de bateria para reformular o layout e repintar a página.
Melhoramos a interoperabilidade com o Safari no iOS. O novo modelo deve corresponder ao comportamento do Safari, o que facilita a vida dos desenvolvedores da 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.
Para cenários em tela cheia, em que a barra de URL fica bloqueada em um estado oculto, o ICB usará 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 de URL não aparece na rolagem.
Demonstração
- Confira uma demonstração.
As quatro barras à direita da página são todas combinações possíveis de
99%,99vh,position:fixedeposition:absolutefornecidas em uma página rolável. Ocultar a barra de URL mostra como ela afeta cada um. Os eventos de redimensionamento são mostrados na página.
Suporte
- Chrome 56 no Android