El fondo de pantalla completa de CSS muestra una barra blanca en la parte inferior cuando se desplaza en el dispositivo móvil

Question

Tengo un sitio web con una imagen de fondo en pantalla completa.

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

Este código funciona bien en la mayoría de los dispositivos, pero en algunos dispositivos Android antiguos, esto causa un problema al desplazarse hacia abajo. Al desplazarse parcialmente hacia abajo, pero sin soltar el dedo, se muestra una barra blanca del mismo tamaño que la barra de URL que desaparece al mismo tiempo. Una vez que suelta el dedo, el fondo se arregla solo.

Así es como se ve la imagen en el medio del desplazamiento.

¿Hay alguna forma de asegurarse de que el fondo siempre llene la página?

---

Editar: también he intentado agregar un div con estas propiedades:

#background {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
}

Esto muestra el fondo pero ocurre el mismo problema.

Answer 1

En IOS y dispositivos Android más nuevos, vh se ha corregido para que 100vh sea siempre la altura entre la parte inferior de la barra superior mínima y la parte inferior de la pantalla.

En dispositivos más antiguos esto no era así, por lo que vh cambia cuando el usuario se deshace de algunas de las barras superiores del navegador desplazándose.

Esta corrección se introdujo para detener el fenómeno que está viendo y el posible 'salto' en el tamaño de los elementos al desplazarse. Ha introducido otro problema que es que no todos sus antecedentes se mostrarán cuando el usuario ingrese por primera vez a la página.

En su caso, esto no se nota debido al color sólido a cierta distancia en la parte inferior de su imagen. Importaría si hubiera texto cerca de la parte inferior.

Quizás podría solucionar su problema teniendo un elemento absolutamente colocado, o un pseudo elemento, que tuviera el mismo fondo pero a 100vh más un poco. Esto podría funcionar, es decir. le da una unión visible, dada la naturaleza de su imagen.

Sin embargo, me doy cuenta de que no es una solución general.

Answer 2

Podría intentar usar un pseudo elemento, podría ser un poco de trabajo, pero podría solucionar el problema, así

html, body {
height: 100vh;
width: 100vw;
position: relative;
z-index: 2;
}

body::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: url('/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 1;
}

Answer 3

Prueba esto. Hará que tu fondo siempre llene la página

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;

  position: absolute;
}

Answer 4

¿Qué pasa si simplemente configura el fondo de la aplicación principal en negro y extiende la foto de fondo con una pequeña franja negra combinada? Esto suena como un error / característica de Android.

Answer 5

¿Intentaste esto?

html {
   min-height: 100vh;
}

Esto se sugiere en la pregunta del enlace a continuación, que parece ser similar a su problema:

https://stackoverflow.com/a/47372972/6119844

Answer 6

No sabía cómo hacer esto, así que lo busqué. Safaritiene la tendencia a hacer esto en todos los sitios web, pero es posible que pueda solucionarlo en su caso. Encontré algunas preguntas similaresStack Overflow sobre cómo solucionarlo. Presentaré algunas de las soluciones a continuación:

Agrega una clase de desplazamiento a tu fondo

html,
body {
 height: 100%;
 margin: 0;
 overflow: hidden;
}
.scroll {
 overflow: auto;
 height: 100%;
}

Evitar el desplazamiento por desbordamiento

html,
body {
 -webkit-overflow-scrolling: auto;
}

Uso de la biblioteca iNoBounce

Esta biblioteca se puede encontrar aquí . Este debería ser su último recurso en el caso de que los otros métodos no funcionen. Los propietarios no han lanzado una nueva actualización desde 2018, pero por ahora ha funcionado en mis pruebas. Codificación feliz :)

Answer 7

intente esto: 420 es un tamaño de pantalla móvil común. ??? se basa en la altura de sus elementos

@media screen and (max-width: 420px) {
  .sampleCSSclass {
    height: calc(100vh - ????px);
  }
}

Answer 8

Si la barra de desplazamiento no se usa en su totalidad, puede agregar un desbordamiento oculto al cuerpo y no se verá ningún desbordamiento. Intente establecer el margen y el relleno en 0

Answer 9

Eso es porque height: 100vh;necesitas aumentar la altura. Tal vez deberías intentarlo height:100%o intentarlomin-height: 100vh;

Answer 10

1. Utilice -webkit-fill-available

   https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

2. Tuve un problema similar que tuve que calcular la altura de un cuerpo sin la barra de herramientas de safari. se le ocurrió esta solución. No sé si también te está funcionando o no:

   cuerpo {altura: 100vh; altura: calc (var (- vh, 1vh) * 100); }