Der CSS-Vollbildhintergrund zeigt beim Scrollen auf dem Handy unten einen weißen Balken
Ich habe eine Website mit einem Hintergrundbild im Vollbildmodus.
html, body {
height: 100vh;
}
html {
background: url('/img/background.jpg') no-repeat center center fixed;
background-size: cover;
}
Dieser Code funktioniert auf den meisten Geräten einwandfrei, auf einigen alten Android-Geräten verursacht dies jedoch ein Problem beim Scrollen nach unten. Wenn Sie teilweise nach unten scrollen, aber Ihren Finger nicht loslassen, wird ein weißer Balken angezeigt, dessen Größe der URL-Leiste entspricht, die gleichzeitig verschwindet. Sobald Sie Ihren Finger loslassen, repariert sich der Hintergrund von selbst.
So sieht das Bild in der Mitte des Bildlaufs aus.

Gibt es eine Möglichkeit, um sicherzustellen, dass der Hintergrund immer die Seite ausfüllt?
Bearbeiten: Ich habe auch versucht, ein Div mit diesen Eigenschaften hinzuzufügen:
#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;
}
Dies zeigt den Hintergrund, aber das gleiche Problem tritt auf.
Antworten
Auf iOS- und neueren Android-Geräten wurde vh so korrigiert, dass 100vh immer die Höhe zwischen dem unteren Rand der minimalen oberen Leiste und dem unteren Rand des Bildschirms ist.
Bei älteren Geräten war dies nicht der Fall. Daher ändert sich vh, wenn der Benutzer einige der oberen Leisten des Browsers durch Scrollen entfernt.
Diese Korrektur wurde eingeführt, um das Phänomen, das Sie sehen, und das potenzielle "Springen" der Größe von Elementen beim Scrollen zu stoppen. Es hat ein weiteres Problem eingeführt, das darin besteht, dass nicht der gesamte Hintergrund angezeigt wird, wenn der Benutzer die Seite zum ersten Mal betritt.
In Ihrem Fall fällt dies aufgrund der Volltonfarbe für einen gewissen Abstand am unteren Rand Ihres Bildes nicht auf. Es wäre wichtig, wenn sich unten Text befinden würde.
Sie könnten Ihr Problem vielleicht umgehen, indem Sie ein absolut platziertes Element oder ein Pseudoelement haben, das den gleichen Hintergrund hat, aber bei 100vh plus ein bisschen. Dies könnte funktionieren, dh. es gibt eine sichtbare Verbindung, abhängig von der Art Ihres Bildes.
Ich weiß jedoch, dass dies keine allgemeine Lösung ist.
Sie könnten versuchen, ein Pseudoelement zu verwenden, es könnte ein bisschen Arbeit sein, aber es könnte möglicherweise das Problem beheben
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;
}
Versuche dies. Dadurch füllt Ihr Hintergrund immer die Seite
html, body {
height: 100vh;
}
html {
background: url('/img/background.jpg') no-repeat center center fixed;
background-size: cover;
position: absolute;
}
Was ist, wenn Sie einfach den Hintergrund der Haupt-App auf Schwarz einstellen und das Hintergrundfoto mit einem kleinen schwarzen Streifen überblenden? Das klingt nach einem Android-Fehler / einer Android-Funktion.
Hast du das versucht:
html {
min-height: 100vh;
}
Dies wird in der folgenden Linkfrage vorgeschlagen, die Ihrem Problem ähnlich zu sein scheint:
https://stackoverflow.com/a/47372972/6119844
Ich wusste nicht, wie ich das machen sollte, also habe ich es nachgeschlagen. Safarihat die Tendenz, dies auf allen Websites zu tun, aber Sie können es möglicherweise für Ihren Fall beheben. Ich habe einige ähnliche Fragen Stack Overflowzur Behebung gefunden. Ich werde einige der folgenden Lösungen vorstellen:
Fügen Sie Ihrem Hintergrund eine Bildlaufklasse hinzu
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
.scroll {
overflow: auto;
height: 100%;
}
Überlauf-Scrollen verhindern
html,
body {
-webkit-overflow-scrolling: auto;
}
Verwenden der iNoBounce-Bibliothek
Diese Bibliothek finden Sie hier . Dies sollte Ihr letzter Ausweg sein, falls die anderen Methoden nicht funktionieren. Die Besitzer haben seit 2018 kein neues Update veröffentlicht, aber im Moment hat es meine Tests durchgearbeitet. Viel Spaß beim Codieren :)
Versuchen Sie Folgendes: 420 ist eine gängige Bildschirmgröße für Mobilgeräte. ??? basiert auf der Höhe Ihrer Elemente
@media screen and (max-width: 420px) {
.sampleCSSclass {
height: calc(100vh - ????px);
}
}
Wenn die Bildlaufleiste überhaupt nicht verwendet wird, können Sie dem Körper einen verborgenen Überlauf hinzufügen, und es ist kein Überlauf möglich. Versuchen Sie, Rand und Abstand auf 0 zu setzen
Das liegt daran, dass height: 100vh;
Sie die Höhe erhöhen müssen. Vielleicht solltest du es versuchen height:100%
oder versuchenmin-height: 100vh;
Verwenden Sie -webkit-fill-available
https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/
Ich hatte ein ähnliches Problem, dass ich die Größe eines Körpers ohne Safari-Symbolleiste berechnen musste. kam mit dieser Lösung. Ich weiß nicht, ob es auch für Sie funktioniert oder nicht:
Körper {Größe: 100vh; Höhe: calc (var (- vh, 1vh) * 100); }}