iOS Chrome calcula la altura incorrecta del documento

10

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:

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!

Anzhelika
fuente
Se necesita más información aquí. ¿Puedes publicar una muestra de código? El resto del marcado css / html podría estar contribuyendo a los problemas, no solo a la altura y la plataforma
Rachel Gallen el
Curioso: en su ejemplo, puede cambiar .linksdiv a position: absolute. ¿Cambia esto el comportamiento que estás viendo? (No tengo iphone para probar)
slynagh
Aquí está su ejemplo de código @Rachel Gallen.
Aaron3219
Además, intente girar su teléfono al modo horizontal y viceversa. Será arreglado. Creo que este es un problema con Chrome y no con HTML / CSS. Solo aparece en Chrome y la cantidad que tiene que desplazarse hacia abajo es la cantidad exacta de píxeles que resultan en la barra inferior y superior del navegador Chrome si los combina.
Aaron3219
@slynagh no, no lo hace.
Aaron3219

Respuestas:

3

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.

Veneseme Tyras
fuente