La barra di navigazione fissa si separa dalla parte superiore del browser su Chrome per iPhone

Ho un sito Web con una barra di navigazione fissa-to-top bootstrap (example here) e ho notato che, utilizzando Chrome su un iPhone, la barra di navigazione si separa dalla parte superiore del schermo di pochi pixel durante lo scorrimento veloce. Questo è mostrato nella seguente schermata, dalla pagina di esempio barra di navigazione di bootstrap:La barra di navigazione fissa si separa dalla parte superiore del browser su Chrome per iPhone

questo accade solo su Chrome su un iPhone, e non su un iPad o Mac/PC che ho provato. Succede anche su ogni sito web con una barra di navigazione fissa che ho potuto trovare. L'unica cosa che posso pensare è di estendere il colore di sfondo della barra di navigazione sopra la parte superiore del browser in modo che, quando alla fine la barra di navigazione viene abbassata, non si separa completamente dallo schermo. Tuttavia, ciò lascia ancora il contenuto della barra di navigazione abbattuto, e sicuramente sembra una soluzione sporca.

Qualcun altro si è imbattuto in questo problema e c'è qualche tipo di correzione nota disponibile?

fonte

2016-02-02 MPLewis

Avendo notato stesso problema qui. Sono felice di mettere questo come un bug di Chrome in quanto ciò accade solo dopo aver "premuto" per aggiornare. Diventa davvero molto confuso dopo questo - ma questo non accade se si eseguono azioni davvero molto lentamente. –

provato ad aggiungere 'padding-top: 20px; top: -20px; '- non aiuta né – mymlyn

E javascript non è in grado di risolverlo. Ho tentato di riposizionarlo in cima a tutti gli eventi di scroll/eventi di ridimensionamento della finestra, senza fortuna. Sembra che la vista/vedova venga distorta. Inoltre è stato in grado di riprodurre ogni tanto il passaggio da verticale a orizzontale. – codybuell

Ho usato un modo difficile da coprire questa lacuna,
ho impostato padding-top: 100px alla navigazione, e quindi margin-top: -100px,
così quando è successo di nuovo, il divario sarebbe riempito da il padding-top.

Funziona bene finora, e spero che questo possa aiutare anche voi.

fonte

2016-04-18 09:30:00

-1

Appena incappato nello stesso problema circa una settimana fa. Stavo usando Bootstrap e ho scoperto questo problema su Google Chrome su iPhone. Prova a inserire uno <div class="wrapper"></div> intorno a tutti i tuoi contenuti oltre alla barra di navigazione fissa. Una volta che è finito lo stile la tua pagina con il seguente 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; 
}

EDIT: Google ha risolto questo, quindi questo non è più un problema. Grazie Dio!

fonte

2016-05-26 19:36:06

La posizione: absolute che è nella tua risposta si comporta in modo completamente diverso dalla posizione: fixed' quello è desiderato Da quello che posso dire, non c'è modo di risolvere questo problema se non l'hack descritto nel mio post e un'altra risposta, mantenendo la posizione fissa necessaria. – MPLewis

OK, quindi ho avuto lo stesso problema, di avere uno spazio prima dell'intero contenuto di <body> in chrome, la soluzione trovata alla fine? Avevo uno spazio ' ' simbolo all'inizio del documento, prima del tag <!DOCTYPE html>, rimuovendo risolto tutto.

Non ci posso credere.

fonte

2016-06-07 14:16:10

Questa non è una soluzione, ma aggiungendo una barra bianca sopra dell'elemento migliorerà la situazione impedendo il contenuto di picco attraverso:

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

fonte

2016-07-20 19:54:38 Lane

La barra di navigazione fissa si separa dalla parte superiore del browser su Chrome per iPhone

risposta

Problemi correlati