Nuevas unidades de viewport en CSS: `svh`, `lvh`, `dvh`

• Configurar en función del ancho/alto del viewport es práctico, pero vh tiene muchos bugs en móvil
  → porque el tamaño del viewport no incluye la UI de la barra de direcciones del navegador
• 100vh debería equivaler a toda la altura del viewport en móvil, pero en Safari/Chrome (Android), que ocultan la UI al hacer scroll, se generan problemas
• Por eso el CSS Working Group presentó nuevas unidades: svh, lvh, dvh
  • svh Small Viewport: altura del viewport cuando la UI de la barra de direcciones no está contraída
  • lvh Large Viewport: altura del viewport cuando la UI de la barra de direcciones está contraída
  • dvh Dynamic Viewport: cambia dinámicamente entre svh / lvh
• Usando 100dvh se puede hacer que un botón ubicado al fondo siempre permanezca visible
  • Pero hay que tener cuidado, porque puede haber problemas de rendimiento

[hided62]

¡Guau! Había cosas que se comportaban de forma terriblemente extraña en Firefox para Android al usar position:fixed, bottom: 0, así que tendré que revisar si esto lo soluciona.

[tobyyun]

https://caniuse.com/viewport-unit-variants
en iOS es compatible desde la 15.4, y en Android desde la 114

[tomriddle7]

Hay tantas Viewport Units que ya empieza a ser confuso.

[carnoxen]

La ironía de que es un problema del que debería encargarse el navegador, pero termina asumiéndolo el grupo de estandarización...