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:
As medidas definidas em unidades de visualização (por exemplo, vh) não serão redimensionadas em resposta
à barra de URL mostrada ou oculta. 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 "viewport maior 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 de raiz usado ao
dimensionar elementos em relação aos pais. Por exemplo, atribuir ao elemento <html>
o estilo width: 100%; height: 100% vai fazer com que ele tenha o mesmo tamanho que
o ICB. Com essa mudança, o ICB não vai ser redimensionado quando a barra de URL estiver oculta.
Em vez disso, ela vai permanecer com a mesma altura, como se a barra de URL estivesse sempre aparecendo
("janela de visualização menor 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 de URL estiver oculta.
Há uma exceção às mudanças acima, que é para elementos
position: fixed. O comportamento deles não muda. Ou seja, um elemento position:
fixed cujo bloco de contenção é o ICB vai ser redimensionado em resposta à
mostrar ou ocultar a barra de URL. Por exemplo, se a altura for 100%, ela sempre vai preencher
exatamente a altura visível, independentemente de a barra de URL ser mostrada ou não. Da mesma forma, para
comprimentos de vh, eles também serão redimensionados para corresponder à altura visível, considerando a posição da
barra de URL.
Há alguns motivos para essa mudança:
Unidades
vhutilizáveis em dispositivos móveis. Antes disso, o uso de unidadesvhsignificava que uma página era realimentada de forma brusca sempre que o usuário mudava a direção de rolagem.Melhor experiência do usuário. Se uma página for refeita enquanto o usuário estiver lendo, ele poderá perder a localização relativa no documento. Isso é frustrante, mas também consome mais bateria e usa mais o processador para refazer o layout e repintar a página.
Melhoria na interoperabilidade com o Safari no iOS. O novo modelo precisa corresponder ao comportamento do Safari, facilitando a vida dos desenvolvedores da Web. A escolha não intuitiva de tornar as unidades
vha viewport maior possível, mas o ICB o menor possível, é para corresponder ao comportamento do Safari.
Para cenários de tela cheia, em que a barra de URL está bloqueada em um estado oculto, o ICB vai usar a altura de tela cheia. Isso é consistente com as definições acima, já que a "janela de visualização menor possível" será a janela de visualização completa, já que a barra de URL não aparece no rolagem.
Demonstração
- Confira uma demonstração.
As quatro barras à direita da página são todas as 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 parte de baixo da página.
Suporte
- Chrome 56 no Android.