Biały obszar na stałym tle podczas przewijania na ios

Moim celem jest skalowanie tła w systemie iOS/Android, które nie musi przeskalowywać po przewinięciu użytkownika (a pasek adresu znika). Znalazłem kilka pytań z przydatnymi odpowiedziami, ale nadal mam denerwujące zachowanie na moim iPhonie. Używam Bootstrap.Biały obszar na stałym tle podczas przewijania na ios

Oto mój uproszczony HTML

<html> 
<body> 
    <div id="background-img"></div> 
    <div id="layout" class="container"> 
    <div id="content-main" class="col-xs-12"> 
     <p>Some text here</p> 
    </div> 
</div> 
</body> 
</html>

Oto mój css

html { 
    height: 100%; } 

body { 
    position: relative; 
    /* required for scrollspy */ 
    font-family: Arial, Helvetica, Sans-Serif; 
    font-size: 30px; 
    font-weight: normal; 
    height: 100%; 
    color: white; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
    /* smooth scrolling on ios */ } 

#background-img { 
    width: 100%; 
    top: 0; 
    left: 0; 
    bottom: -80px; 
    position: fixed; 
    z-index: -1; 
    background: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") no-repeat center center; 
    background-size: cover; 
} 
#content-main { //nothing fancy }

Wszystko działa poprawnie na pulpicie. Ale kiedy otwieram witrynę na ios (chrome lub safari - nie robi różnicy), kiedy przewijaję w dół, dostaję biały pasek na dole ekranu. Pasek zniknie po zatrzymaniu przewijania. Można spróbować samemu na telefon komórkowy w: https://jsbin.com/rudetokoxu

Próbowałem rozwiązania zamieszczone tutaj: CSS background stretches to fill height in iOS but there is white space on scroll. Rozwiązanie wydaje się logiczne. Próbowałem nawet ustawić wysokość tła div na 200%, ale bez skutku.

próbował również: mobile IOS Google chrome address bar behaviour i tutaj: Background image jumps when address bar hides iOS/Android/Mobile Chrome tym rozwiązań js (wydawało się, że niektóre z nich nie działa już tak nie próbowałem wszystkie rozwiązania js) i coś jeszcze mogę znaleźć na ten temat

Proszę mi pomóc rozwiązać ten problem lub przekonać mnie nigdy dwa razy pomyśleć o denerwujące małe rzeczy takie jak te (cos życie jest pełne z nich :-))

BTW: ta strona ma ten sam problem na telefon: http://www.laregiondesmusees.fr, ale ta strona nie cierpi: http://www.heartkids.co.nz

Źródło

2015-09-05 jzp74

Czuję twój ból. Jeśli przyjrzysz się dokładnie przykładowi, w którym nie ma problemu z białą przestrzenią (http://www.heartkids.co.nz) - odpowiedź była tam, ale trudno ją znaleźć, chyba że wiesz, czego szukasz.

Zobaczysz, że zastosowali transformację 2D na obrazie tła. W większości przypadków zastosowanie transformacji 2d lub 3d na stałych elementach div z obrazami tła pozbywa się niechcianej białej przestrzeni w ten sposób.

Ten CSS powinien usunąć ten denerwujący biały pasek. Twoje zdrowie.

.background-img { 
    transform: translate3d(0,0,0); 
}

Źródło

2015-10-20 20:20:56 user3621874

Trochę spóźnionej odpowiedzi, ale dzięki! Wygląda na to, że zachowanie, które widziałem zarówno w przeglądarce Chrome, jak i Safari na ios, już nie istnieje w Chrome. Mogę nadal odtwarzać w Safari, ale Twoja sugestia w połączeniu z niektórymi innymi wskazówkami, o których wspomniałem w moim oryginalnym poście, naprawia problem. – jzp74

Dziękuję bardzo za tę odpowiedź. O wiele lepsze niż 1000 js. Twoje zdrowie! –

Biały obszar na stałym tle podczas przewijania na ios

Odpowiedz

Powiązane problemy