O fundo de tela inteira CSS mostra uma barra branca na parte inferior ao rolar no celular

Question

Tenho um site com imagem de fundo em tela cheia.

html, body {
  height: 100vh;
}

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

Este código funciona bem na maioria dos dispositivos, mas em alguns dispositivos Android antigos, isso causa um problema ao rolar para baixo. Rolar parcialmente para baixo, mas sem soltar o dedo, mostra uma barra branca de tamanho igual à barra de URL que está desaparecendo ao mesmo tempo. Assim que você solta o dedo, o fundo se corrige.

É assim que a imagem se parece no meio da rolagem.

Existe uma maneira de garantir que o plano de fundo esteja sempre preenchendo a página?

---

Edit: Eu também tentei adicionar um div com estas propriedades:

#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;
}

Isso mostra o plano de fundo, mas ocorre o mesmo problema.

Answer 1

Em IOS e dispositivos Android mais recentes, vh foi corrigido para que 100vh seja sempre a altura entre a parte inferior da barra superior mínima e a parte inferior da tela.

Em dispositivos mais antigos, isso não acontecia, então vh muda quando o usuário se livra de algumas das barras superiores do navegador rolando.

Essa correção foi introduzida para interromper o fenômeno que você está vendo, e o potencial 'salto' no tamanho dos elementos ao rolar. Ele introduziu outro problema: nem todo o seu plano de fundo aparecerá quando o usuário entrar pela primeira vez na página.

No seu caso, isso não é perceptível por causa da cor sólida a alguma distância na parte inferior da imagem. Importaria se houvesse texto próximo ao final.

Você poderia talvez contornar seu problema tendo um elemento absolutamente colocado, ou um pseudoelemento, que tinha o mesmo fundo, mas a 100vh mais um pouco. Isso pode funcionar, ou seja. dá uma junção visível, dada a natureza da sua imagem.

Não é uma solução geral, porém, eu percebo.

Answer 2

Você pode tentar usar um pseudoelemento, pode ser um pouco trabalhoso, mas pode corrigir o problema, assim

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

Experimente isso. Isso fará com que seu fundo sempre preencha a página

html, body {
  height: 100vh;
}

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

  position: absolute;
}

Answer 4

E se você simplesmente definir o fundo do aplicativo principal como preto e estender a foto do fundo com uma pequena faixa preta mesclada? Isso soa como bug / recurso do Android.

Answer 5

Você tentou isto:

html {
   min-height: 100vh;
}

Isso é sugerido na pergunta do link abaixo, que parece ser semelhante ao seu problema:

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

Answer 6

Eu não sabia como fazer isso, então pesquisei. Safaritem a tendência de fazer isso em todos os sites, mas você pode consertar para o seu caso. Eu encontrei algumas perguntas semelhantesStack Overflow sobre como consertar isso. Apresentarei algumas das soluções abaixo:

Adicione uma classe de rolagem ao seu plano de fundo

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

Impedir overflow scrolling

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

Usando a Biblioteca iNoBounce

Esta biblioteca pode ser encontrada aqui . Este deve ser o seu último recurso caso os outros métodos não funcionem. Os proprietários não lançaram uma nova atualização desde 2018, mas por enquanto ela funcionou em meus testes. Happy Coding :)

Answer 7

tente isto: 420 é um tamanho de tela de celular comum. ??? é baseado na altura dos seus elementos

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

Answer 8

Se a barra de rolagem não for totalmente usada, você pode adicionar o oveflow oculto ao corpo e nenhum estouro será visível. Tente definir a margem e o preenchimento para 0

Answer 9

É por isso que height: 100vh;você precisa aumentar a altura. Talvez você devesse tentar height:100%ou tentarmin-height: 100vh;

Answer 10

1. Use -webkit-fill-available

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

2. Eu tive um problema semelhante que tive que calcular a altura de um corpo sem a barra de ferramentas do safari. surgiu com esta solução. Não sei se está funcionando para você também ou não:

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