Novas unidades de viewport do CSS: svh, lvh, dvh

• Definir com base na largura/altura da viewport é conveniente, mas vh tem muitos bugs no mobile
  → porque o tamanho da viewport não inclui a UI da barra de endereço do navegador
• 100vh deveria corresponder à altura total da viewport no mobile, mas há problemas no Safari/Chrome (Android), que ocultam a UI ao rolar
• Por isso, o grupo de trabalho do CSS apresentou novas unidades: svh, lvh, dvh
  • svh Small Viewport: altura da viewport quando a UI da barra de endereço não está recolhida
  • lvh Large Viewport: altura da viewport quando a UI da barra de endereço está recolhida
  • dvh Dynamic Viewport: varia dinamicamente entre svh / lvh
• Com 100dvh, é possível configurar para que um botão na parte inferior fique sempre visível
  • Mas é preciso ter cuidado, pois pode haver problemas de desempenho

[hided62]

Uau! No Firefox para Android havia coisas que se comportavam de um jeito terrivelmente estranho ao usar position:fixed, bottom: 0, então vou ter que conferir se isso foi resolvido.

[tobyyun]

https://caniuse.com/viewport-unit-variants
iOS tem suporte desde a versão 15.4, e o Android desde a 114.

[tomriddle7]

Agora está começando a ficar confuso com tantas Viewport Units

[carnoxen]

É irônico que isso seja um problema pelo qual o navegador deveria ser responsável, mas quem acaba assumindo a responsabilidade é o grupo de padronização...