Der CSS-Vollbildhintergrund zeigt beim Scrollen auf dem Handy unten einen weißen Balken

Dec 07 2020

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

AHaworth Dec 07 2020 at 04:44

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.

localHacker Dec 07 2020 at 05:25

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

JosueMurhabazi Dec 12 2020 at 21:52

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

Paul Dec 15 2020 at 17:05

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.

MohamadNateqi Dec 16 2020 at 20:49

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

myjobistobehappy Dec 11 2020 at 12:24

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 :)

AliAnsari Dec 17 2020 at 19:58

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);
  }
}
Author Dec 17 2020 at 22:08

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

Dingus45191 Dec 17 2020 at 23:22

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;

Re9iNee Dec 18 2020 at 05:13
  1. Verwenden Sie -webkit-fill-available

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

  2. 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); }}