Naprawiony pasek nawigacji oddziela się od górnej części przeglądarki w przeglądarce Chrome dla iPhone'a

Mam witrynę internetową z paskiem nawigacji bootstrap (example here) i zauważyłem, że z Chrome na iPhonie, navbar oddziela się od górnej krawędzi ekran o kilka pikseli podczas szybkiego przewijania. Jest to pokazane na poniższy zrzut ekranu, z bootstrap NavBar przykład strony:Naprawiony pasek nawigacji oddziela się od górnej części przeglądarki w przeglądarce Chrome dla iPhone'a

Dzieje się tak tylko w Chrome na iPhonie, a nie na iPadzie lub Mac/PC mam badanej. Zdarza się to również na każdej stronie z ustalonym paskiem nawigacyjnym, jaki mogłem znaleźć. Jedyne, co mogę wymyślić, to rozszerzenie koloru tła paska nawigacyjnego ponad górną krawędzią przeglądarki, aby po ostatecznym rozłożeniu paska nawigacyjnego nie całkowicie oddzielił się od ekranu. Jednak nadal pozostawia zawartość paska nawigacyjnego rozebrany, a na pewno wygląda na brudną poprawkę.

Czy ktoś inny napotkał ten problem i czy jest dostępna jakaś znana poprawka?

Źródło

2016-02-02 MPLewis

Stwierdziwszy sam problem tutaj. Z przyjemnością umieszczam to jako błąd przeglądarki Chrome, ponieważ dzieje się to tylko po "rozwinięciu" w celu odświeżenia. Po tym wszystkim robi się naprawdę niezrozumiale - ale tak się nie stanie, jeśli wykonasz działania naprawdę bardzo powoli. –

próbował dodać 'dopełnienie-top: 20px; top: -20px; '- nie pomaga ani – mymlyn

I javascript nie jest w stanie rozwiązać tego problemu. Próbowałem zmienić pozycję na górze we wszystkich wydarzeniach przewijania/zmianie rozmiaru okna, bez powodzenia. Wygląda na to, że okno/widza zostanie zniekształcone. Od czasu do czasu udało się również odtworzyć z portretu na krajobraz. – codybuell

użyłem trudną drogę, aby pokryć tę lukę,
ja ustawić padding-top: 100px do NAV, a następnie margin-top: -100px,
więc kiedy się znowu luka zostanie wypełniona przez podszewka.

Działa jak dotąd dobrze i mam nadzieję, że to może ci pomóc.

Źródło

2016-04-18 09:30:00

-1

Wpadłem na ten sam problem około tydzień temu. Używałem Bootstrapa i odkryłem ten problem w przeglądarce Google Chrome na iPhonie. Spróbuj umieścić <div class="wrapper"></div> wokół wszystkich swoich treści poza ustawionym na stałe navbarem. Po ukończeniu stylizuj swoją stronę za pomocą następującego kodu CSS:

body, html { 
    width: 100vw; 
    height: 100%; 
    overflow-x: hidden !important; 
    display: block; 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: white; 
    overflow-x: hidden !important; 
    width: 100vw; 
    display: block; 
} 

html { 
    overflow-x: hidden !important; 
    width: 100vw; 
    display: block; 
} 

.wrapper { 
    -webkit-overflow-scrolling: touch; 
    overflow-y: scroll; 
    overflow-x: hidden !important; 
    height: 100vh; 
    width: 100vw; 
} 

.navbar { 
    height: 70px; 
    width: 100%; 
    position: absolute; 
    background-color: indigo; 
}

EDYCJA: Google to naprawił, więc nie stanowi to już problemu. Dzięki Bogu!

Źródło

2016-05-26 19:36:06

"Pozycja: absolutna", która znajduje się w Twojej odpowiedzi, zachowuje się zupełnie inaczej niż 'position: fixed' to jest pożądane. Z tego, co wiem, nie można rozwiązać tego problemu poza hackem opisanym w moim poście i kolejnej odpowiedzi, przy zachowaniu koniecznej stałej pozycji. – MPLewis

OK, więc miałem ten sam problem, mając przed spodem całą zawartość <body> w chrome, rozwiązanie znalezione na końcu? Na początku dokumentu miałem symbol przestrzeni ' ' przed tagiem <!DOCTYPE html>, usuwając go, naprawiając wszystko.

Nie mogłem w to uwierzyć.

Źródło

2016-06-07 14:16:10

To nie jest rozwiązanie, ale dodanie biały pasek nad elementem będzie poprawy sytuacji poprzez zapobieganie zawartości od osiągając przez:

.fixed-header:after { 
    content: ''; 
    position: fixed; 
    top: -20px; 
    height: 20px; 
    width: 100%; 
    background-color: #fff; // whatever your nav background color is 
}

Źródło

2016-07-20 19:54:38 Lane

Naprawiony pasek nawigacji oddziela się od górnej części przeglądarki w przeglądarce Chrome dla iPhone'a

Odpowiedz

Powiązane problemy