CSS3 100vh no constante en el navegador móvil

Tengo un problema muy extraño... en cada navegador y versión móvil encontré este comportamiento:

Todos los navegadores tienen un menú superior cuando carga la página (que muestra la barra de direcciones, por ejemplo) que se desliza hacia arriba cuando comienza a desplazarse por la página.
A veces, 100vh se calcula solo en la parte visible de una ventana gráfica, por lo que cuando la barra del navegador se desliza hacia arriba, 100vh aumenta (en términos de píxeles).
todo el diseño se volvió a pintar y reajustar ya que las dimensiones han cambiado
un mal efecto de salto para la experiencia del usuario

¿Cómo se puede evitar este problema? Cuando escuché por primera vez sobre viewport-height me emocioné y pensé que podría usarlo para bloques de altura fija en lugar de usar javascript, pero ahora creo que la única forma de hacerlo es, de hecho, javascript con algún evento de cambio de tamaño...

Puedes ver el problema en: sitio de muestra.

¿Alguien puede ayudarme o sugerirme una solución CSS?

código de prueba simple:

Mostrar fragmento de código

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Expand snippet

May 09 '16 16:05 Nereo Costacurta

Desafortunadamente esto es intencional...

Este es un problema bien conocido (al menos en Safari Mobile), que es intencionado, ya que evita otros problemas. Benjamin Poulain respondió a un error del webkit :

Esto es completamente intencional. Nos costó bastante trabajo lograr este efecto. :)

El problema base es este: el área visible cambia dinámicamente a medida que se desplaza. Si actualizamos la altura de la ventana gráfica CSS en consecuencia, necesitamos actualizar el diseño durante el desplazamiento. No sólo eso parece una mierda, sino que hacerlo a 60 FPS es prácticamente imposible en la mayoría de las páginas (60 FPS es la velocidad de fotogramas básica en iOS).

Es difícil mostrarte la parte de "parece una mierda", pero imagina que mientras te desplazas, el contenido se mueve y lo que quieres en la pantalla cambia continuamente.

La actualización dinámica de la altura no funcionaba, teníamos algunas opciones: eliminar unidades de ventana gráfica en iOS, hacer coincidir el tamaño del documento como antes de iOS 8, usar el tamaño de vista pequeño, usar el tamaño de vista grande.

Según los datos que teníamos, usar un tamaño de vista más grande fue el mejor compromiso. La mayoría de los sitios web que utilizan unidades de ventana gráfica se ven geniales la mayor parte del tiempo.

Nicolas Hoizey ha investigado bastante esto: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -navegadores.html

No hay ninguna solución prevista

En este punto, no hay mucho que pueda hacer excepto abstenerse de usar la altura de la ventana gráfica en dispositivos móviles. Chrome también cambió a esto en 2016:

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
https://developers.google.com/web/updates/2016/12/url-bar-resizing

May 09 '2016 10:05 nils

Puedes probar min-height: -webkit-fill-available;en tu CSS en lugar de 100vh. deberia estar solucionado

Mar 05 '2019 13:03 Saurabh Jain

Contamos con nuevas unidades viewport lvh, svhy dvhal rescate. Esto quedó demostrado en el último vídeo de Google I/O 2022 sobre trabajos web.

Probablemente quieras seguir con dvhque el navegador se adapte a las pestañas ocultas del dispositivo móvil mientras te desplazas. Funciona de manera similar para ancho con y dvwunidades .lvwsvw

Aquí hay una clara ilustración del video: https://youtu.be/Xy9ZXRRgpLk?t=982

Google I/O 2022 en nuevas unidades de ventana gráfica

¿Puedo usar?

Esto estaba funcionando actualmente en mi Chrome Canary con la bandera "Funciones experimentales" habilitada.

May 15 '2022 02:05 m4n0

Actualización 2023 : consulte https://stackoverflow.com/a/72245072/4773272 , que es la mejor manera hoy en día.

Respuesta heredada: en mi aplicación lo hago así (mecanografiado y postcss anidado, así que cambie el código en consecuencia):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

en tu css:

:root {
    --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

Funciona al menos en Chrome Mobile y iPad. Lo que no funciona es cuando agregas tu aplicación a la pantalla de inicio en iOS y cambias la orientación varias veces; de alguna manera, los niveles de zoom interfieren con el valor de altura interna, podría publicar una actualización si encuentro una solución.

Manifestación

Jun 04 '2018 14:06 Andreas Herd