iOS Chrome calcula la altura incorrecta del documento

Para llenar toda la altura de la página, utilizo height: 100%;las etiquetas html y body, y funciona bien hasta que un navegador se cierre y se vuelva a abrir. (No uso 100vh debido a problemas en dispositivos móviles https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html )

Pasos para reproducir:

• Abra https://angelika94.github.io/rick/ en Google Chrome en iPhone (verá que la navegación (Morty y Beer) se encuentra en la parte inferior de la página) captura de pantalla de css Rick con navegación
• cierre el navegador y elimínelo de la navegación multitarea: https://support.apple.com/en-us/HT201330
• abra el navegador nuevamente (verá que la navegación inferior se movió de la "primera pantalla" y ahora necesita desplazarse para verla) captura de pantalla de css Rick sin navegación

la página se arreglará sola en estos casos:

• página de actualización
• rotar el dispositivo a horizontal
• abrir y cerrar la navegación del navegador por pestañas
• cierre y vuelva a abrir el navegador sin cerrarlo en la navegación multitarea

¿Por que sucede? ¿Cómo puedo solucionar este comportamiento?

¡Gracias de antemano!

Tuve un problema muy diferente, pero creo que la solución que resolví puede funcionar también para su situación, porque mencionó que la actualización de la página lo solucionaría.

Así que tuve problemas con Chrome en Android, donde si te desplazas muy rápido (no es raro en dispositivos móviles), algunos elementos no se pueden volver a pintar. Busqué una solución en todas partes, pero no pude encontrar nada que funcionara.

Finalmente, descubrí una solución funcional:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {from { zoom: 99.99999%; } to { zoom: 99.99998%; }}

Entonces, lo que esto hace es forzar a la página a volver a pintar continuamente en un ciclo de 3 segundos.

Tal vez debería ajustarlo para cambiar solo por una fracción de segundo cada 2 segundos, en lugar de continuamente:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {
  0% {
    zoom: 99.99999%;
  }
  99% {
    zoom: 99.99999%;
  }
  100% {
    zoom: 99.99998%;
  }
}

Probé zoom: 99.99999;a 1pero ciertos elementos que la transición de escala por encima de 1 en algunos efectos de activación mostraría la respiración de zoom. Entonces, 99.99999 a 99.99998 fue lo que funcionó para mí para que el efecto fuera invisible.

Solución ligeramente hacky que podría presentar problemas de rendimiento para páginas muy largas, pero tal vez no, porque el navegador solo debería mostrar lo que está en pantalla. Las páginas en las que usé esto son gráficamente pesadas con muchos efectos complejos de múltiples capas, y esto no parece tener un impacto notable en el rendimiento.

Parece que muchos navegadores móviles tienen un procesamiento excesivamente optimizado, lo que conduce a fallas extravagantes con pocas soluciones bien documentadas. Forzar repintar fue la única solución que encontré.

Probé otros métodos documentados, un poco menos agresivos, para forzar repintos. Como agregar texto a la página (de manera invisible) después de que el desplazamiento se detenga durante 200 ms, y tal. Sin embargo, nada funcionó, por lo tanto, mi hack animado de toda la página para siempre.

En su caso, algunos de esos otros hacks pueden funcionar mejor. Este artículo describe todas las diversas cosas que causan repintos / reflujos para que pueda intentar hacer algunas de estas cosas a través de un script.