L'arrière-plan plein écran CSS affiche une barre blanche en bas lors du défilement sur mobile
J'ai un site Web avec une image d'arrière-plan plein écran.
html, body {
height: 100vh;
}
html {
background: url('/img/background.jpg') no-repeat center center fixed;
background-size: cover;
}
Ce code fonctionne correctement sur la plupart des appareils, mais sur certains anciens appareils Android, cela pose un problème lors du défilement vers le bas. Faire défiler partiellement vers le bas, mais sans relâcher votre doigt, affiche une barre blanche de taille égale à la barre d'URL qui disparaît en même temps. Une fois que vous relâchez votre doigt, l'arrière-plan se corrige.
Voici à quoi ressemble l'image à mi-défilement.

Existe-t-il un moyen de s'assurer que l'arrière-plan remplit toujours la page?
Edit: j'ai également essayé d'ajouter un div avec ces propriétés:
#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;
}
Cela montre l'arrière-plan mais le même problème se produit.
Réponses
Sur IOS et les appareils Android plus récents, vh a été corrigé de sorte que 100vh soit toujours la hauteur entre le bas de la barre supérieure minimale et le bas de l'écran.
Dans les appareils plus anciens, ce n'était pas le cas, donc vh change lorsque l'utilisateur se débarrasse de certaines des barres supérieures du navigateur en faisant défiler.
Cette correction a été introduite pour arrêter le phénomène que vous voyez et le potentiel de «saut» de la taille des éléments lors du défilement. Cela a introduit un autre problème qui est que tout votre arrière-plan n'apparaîtra pas lorsque l'utilisateur entre pour la première fois dans la page.
Dans votre cas, cela ne se remarque pas à cause de la couleur unie sur une certaine distance au bas de votre image. Ce serait important s'il y avait du texte en bas.
Vous pourriez peut-être contourner votre problème en ayant un élément absolument placé, ou un pseudo élément, qui avait le même arrière-plan mais à 100vh plus un peu. Cela pourrait fonctionner, ce est à dire. cela donne une jointure visible, compte tenu de la nature de votre image.
Pas une solution générale cependant, je m'en rends compte.
Vous pouvez essayer d'utiliser un pseudo élément, cela peut être un peu de travail, mais cela pourrait potentiellement résoudre le problème, comme ceci
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;
}
Essaye ça. Cela fera en sorte que votre arrière-plan remplisse toujours la page
html, body {
height: 100vh;
}
html {
background: url('/img/background.jpg') no-repeat center center fixed;
background-size: cover;
position: absolute;
}
Que faire si vous définissez simplement l'arrière-plan de l'application principale en noir et étendez la photo d'arrière-plan avec une petite bande noire mélangée? Cela ressemble à un bug / une fonctionnalité Android.
Avez-vous essayé ceci:
html {
min-height: 100vh;
}
Ceci est suggéré dans la question du lien ci-dessous, qui semble similaire à votre problème:
https://stackoverflow.com/a/47372972/6119844
Je ne savais pas comment faire ça, alors j'ai cherché. Safaria tendance à le faire sur tous les sites Web, mais vous pourrez peut-être le résoudre pour votre cas. J'ai trouvé quelques questions similairesStack Overflow sur la façon de résoudre ce problème. Je présenterai quelques-unes des solutions ci-dessous:
Ajouter une classe de défilement à votre arrière-plan
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
.scroll {
overflow: auto;
height: 100%;
}
Empêcher le défilement par débordement
html,
body {
-webkit-overflow-scrolling: auto;
}
Utilisation de la bibliothèque iNoBounce
Cette bibliothèque se trouve ici . Cela devrait être votre dernier recours dans le cas où les autres méthodes ne fonctionnent pas. Les propriétaires n'ont pas publié de nouvelle mise à jour depuis 2018, mais pour l'instant, cela a fonctionné grâce à mes tests. Bon codage :)
essayez ceci: 420 est une taille d'écran mobile courante. ??? est basé sur la hauteur de vos éléments
@media screen and (max-width: 420px) {
.sampleCSSclass {
height: calc(100vh - ????px);
}
}
Si la barre de défilement n'est pas totalement utilisée, vous pouvez ajouter oveflow hidden au corps et aucun débordement ne sera visible. Essayez de définir la marge et le remplissage à 0
C'est à cause de height: 100vh;
vous devez augmenter la hauteur. Peut-être que tu devrais essayer height:100%
ou essayermin-height: 100vh;
Utilisez -webkit-fill-available
https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/
J'ai eu un problème similaire que je devais calculer la hauteur d'un corps sans barre d'outils safari. est venu avec cette solution. Je ne sais pas si cela fonctionne pour vous aussi ou non:
corps {hauteur: 100vh; hauteur: calc (var (- vh, 1vh) * 100); }