Pełnoekranowe tło CSS pokazuje biały pasek na dole podczas przewijania na telefonie komórkowym

Dec 07 2020

Mam witrynę z pełnoekranowym obrazem tła.

html, body {
  height: 100vh;
}

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

Ten kod działa dobrze na większości urządzeń, ale na niektórych starych urządzeniach z Androidem powoduje to problem podczas przewijania w dół. Częściowe przewinięcie w dół, ale bez zwalniania palca, pokazuje biały pasek o rozmiarze równym paskowi adresu URL, który znika w tym samym czasie. Po zwolnieniu palca tło samo się naprawia.

Tak wygląda obraz w trakcie przewijania.

Czy istnieje sposób, aby tło zawsze wypełniało stronę?


Edycja: próbowałem również dodać element div o tych właściwościach:

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

To pokazuje tło, ale występuje ten sam problem.

Odpowiedzi

AHaworth Dec 07 2020 at 04:44

Na IOS i nowszych urządzeniach z Androidem vh zostało naprawione tak, że 100 vh jest zawsze wysokością między dolną krawędzią minimalnego górnego paska a dolną częścią ekranu.

W starszych urządzeniach tak nie było, więc vh zmienia się, gdy użytkownik pozbywa się niektórych górnych pasków przeglądarki przez przewijanie.

To naprawienie zostało wprowadzone, aby zatrzymać obserwowane zjawisko i potencjalne „przeskakiwanie” elementów podczas przewijania. Wprowadził kolejny problem polegający na tym, że nie całe tło będzie się wyświetlać, gdy użytkownik po raz pierwszy wejdzie na stronę.

W twoim przypadku nie jest to zauważalne ze względu na jednolity kolor w pewnej odległości na dole obrazu. Miałoby znaczenie, gdyby u dołu znajdował się tekst.

Być może możesz obejść swój problem, mając absolutnie umieszczony element lub pseudoelement, który miał to samo tło, ale przy 100 vh plus trochę. To może zadziałać, tj. daje widoczne połączenie, biorąc pod uwagę charakter Twojego obrazu.

Zdaję sobie sprawę, że nie jest to rozwiązanie ogólne.

localHacker Dec 07 2020 at 05:25

Możesz spróbować użyć pseudoelementu, może to wymagać trochę pracy, ale może potencjalnie rozwiązać problem, na przykład

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

Spróbuj tego. Dzięki temu tło będzie zawsze wypełniało stronę

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

Co się stanie, jeśli po prostu ustawisz główne tło aplikacji jako czarne i rozszerzysz zdjęcie w tle o zmieszane z małym czarnym paskiem? To brzmi jak błąd / funkcja Androida.

MohamadNateqi Dec 16 2020 at 20:49

Czy próbowałeś tego:

html {
   min-height: 100vh;
}

Jest to sugerowane w poniższym pytaniu dotyczącym linku, które wydaje się być podobne do twojego problemu:

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

myjobistobehappy Dec 11 2020 at 12:24

Nie wiedziałem, jak to zrobić, więc poszukałem tego. Safarima tendencję do robienia tego na wszystkich stronach internetowych, ale możesz to naprawić w swoim przypadku. Znalazłem kilka podobnych pytań, Stack Overflowjak to naprawić. Poniżej przedstawię niektóre z rozwiązań:

Dodaj klasę przewijania do swojego tła

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

Zapobiegaj przewijaniu przez przepełnienie

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

Korzystanie z biblioteki iNoBounce

Tę bibliotekę można znaleźć tutaj . To powinna być twoja ostatnia deska ratunku w przypadku, gdy inne metody nie działają. Właściciele nie wydali nowej aktualizacji od 2018 roku, ale na razie przeszła moje testy. Miłego kodowania :)

AliAnsari Dec 17 2020 at 19:58

spróbuj tego: 420 to typowy rozmiar ekranu telefonu komórkowego. ??? zależy od wysokości elementów

@media screen and (max-width: 420px) {
  .sampleCSSclass {
    height: calc(100vh - ????px);
  }
}
Author Dec 17 2020 at 22:08

Jeśli pasek przewijania jest całkowicie nieużywany, możesz dodać przepływ ukryty do treści i żadne przepełnienie nie będzie dozwolone. Spróbuj ustawić margines i dopełnienie na 0

Dingus45191 Dec 17 2020 at 23:22

To dlatego, że height: 100vh;musisz zwiększyć wysokość. Może powinieneś spróbować height:100%lub spróbowaćmin-height: 100vh;

Re9iNee Dec 18 2020 at 05:13
  1. Użyj -webkit-fill-available

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

  2. Miałem podobny problem, że musiałem obliczyć wysokość ciała bez paska narzędzi safari. wymyślił to rozwiązanie. Nie wiem, czy to też działa dla Ciebie, czy nie:

    body {wysokość: 100vh; wysokość: calc (var (- vh, 1vh) * 100); }