example L'intestazione fissa scompariva quando si scorreva verso il basso nella visualizzazione Web in iOS 11




ios webview example (9)

Ho un'app nativa per iOS con una webview per mostrare contenuti web. Ho un'intestazione fissa nella mia app con le seguenti proprietà:

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

Prima di passare a iOS 11, tutto funzionava perfettamente. Ora quando faccio scorrere verso il basso / verso l'alto l'intestazione scompare durante lo scorrimento e quando lo scorrimento è terminato, l'intestazione appare di nuovo.

Questo può anche essere riprodotto in Xcode 8.


La posizione corretta non funziona bene con iOS, ma ho usato la posizione assoluta nelle mie app cordova che non mi ha mai causato alcun problema.


Ho avuto questo problema molto simile con un progetto Cordova costruito per iOS, che utilizza una webview. Cordova utilizza l'UIWebView come motore di visualizzazione Web per impostazione predefinita e ho provato tutte le possibili correzioni menzionate in questa discussione e molte altre. Infine, la nostra unica soluzione era cambiare il motore di visualizzazione Web da UIWebView a WKWebView ( https://developer.apple.com/documentation/webkit/wkwebview ). Con Cordova, l'introduzione di WKWebView è piuttosto semplice con un plugin https://github.com/apache/cordova-plugin-wkwebview-engine

Dopo aver introdotto WKWebView e affrontato alcuni dei problemi che causano, non stiamo più sperimentando lo sfarfallio o la scomparsa di elementi posizionati in posizione fissa durante lo scorrimento di iOS 11.


Hai provato a usare la position:sticky invece di position:fixed ?

In passato funziona molto bene su iOS. Si prega di prendere nota che è la position:sticky parte top regola requiled position:sticky deve essere definita.

Quindi la soluzione finale nel tuo caso dovrebbe essere:

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1;
}

Inoltre, se hai bisogno di un offset extra dall'alto puoi regolare in top:0; regola da zero a qualsiasi numero in px.

E ancora una nota finale: l'elemento appiccicoso non estrae l'elemento dal flusso del documento e fungerà da elemento di documento ordinario (come div con position:static o relative ), ma non come elemento posizionato in assoluto (in caso di fixed o absolute ).

http://caniuse.com/#feat=css-sticky



Il trucco è forzare l'accelerazione della GPU. Fatelo aggiungendo translate3d all'elemento #header .

transform: translate3d(0,0,0);

Se gli elementi nidificati all'interno dell'elemento #header continuano a scomparire, aggiungi translate3d a loro.


Ho combattuto contro lo stesso problema anch'io.

Il problema (almeno come manifestato nell'app a cui sto lavorando) sembra solo avvenire su schermi che sono una combinazione di alti (nel senso che richiedono una buona quantità di scorrimento) e abbastanza complessi.

In generale, almeno per me, il problema sembra manifestarsi davvero solo quando lo scorrimento del momento entra in azione.

Sebbene in particolare ci sia uno schermo, che contiene 15 file di immagini scorrevoli con il lato sinistro-destro, questo spezzerà la testa / il piè di pagina, indipendentemente dalla velocità con cui lo si scorre.

A mia difesa ... non avevo assolutamente nulla a che fare con il design. :-)

In ogni caso ...

Dopo molte ricerche su una sperimentazione, sono riuscito a trovare una "soluzione" di sorta.

Intendiamoci, non sto affermando che questo è il modo per andare qui. Ma forse qualcuno con più esperienza di me nello spazio delle app mobili, può prendere questa informazione ed estrapolare qualcosa di meno schifoso da esso.

Il primo pezzo ha questo aspetto:

html,
body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
}

E poi per il contenitore che funge da corpo principale dello schermo:

.main-content-area {
    overflow-y: auto;
    height: 100%;
}

Questo ucciderà lo scorrimento del momento per la tua app. Il che non è eccezionale, lo so. Ma come risultato della riduzione della capacità dell'utente di scorrere molto rapidamente, il rendering dello schermo sembra essere in grado di tenere il passo e il problema scompare.

Ancora una volta, non lo consiglio come soluzione valida per la produzione. Perché ovviamente non è eccezionale.

Sto offrendo questo più come un possibile trampolino di lancio per una soluzione reale, nella speranza che sia d'aiuto.

=== >>> AGGIORNAMENTO:

Ho una soluzione funzionante. Ma, come altri prima di me hanno sottolineato, ho dovuto evitare l'uso di Fixed Positioning.

Invece, ho usato Absolute Positioning per definire le sezioni Header, Footer e Main Content della pagina. Quindi consentito lo scorrimento solo nella sezione Contenuto principale.

Se aiuta, ho il POC che ho messo insieme su BitBucket


position: fixed has always been a problem con iOS. Sembra che in ogni versione di iOS il problema persista. Ora, non sono riuscito a trovare nulla riguardo al cambiamento di comportamento della tua applicazione da iOS 10 a 11, potresti considerare di segnalarlo come un bug ; d'altra parte avendo visto le moltitudini di persone che hanno riscontrato questo problema e il fatto che influisce più o meno su tutte le versioni di iOS recenti, suggerirei di non utilizzare la position: fixed .

La soluzione più comune è la transform: translateZ(0) , non solo funziona su iOS e previene "qualsiasi possibile flickering , costringe anche il browser a utilizzare l'accelerazione hardware per accedere alla GPU per far volare i pixel . Dovrebbe funzionare anche senza il prefisso -webkit- da iOS 9.


Ho avuto lo stesso problema con entrambe le posizioni: fisso e posizione: appiccicoso. Chasing da UIWebView a WKWebView lo ha risolto per me:

#import <WebKit/WebKit.h>

....

@property (weak, nonatomic) IBOutlet WKWebView *myWebView;

"A partire da iOS 8.0 e OS X 10.10, utilizzare WKWebView per aggiungere contenuti Web alla tua app. Non utilizzare UIWebView o WebView."

https://developer.apple.com/documentation/webkit/wkwebview


Sto solo scrivendo del codice, provo uno alla volta

Dalla nota ufficiale di Apple:

Importante:

A partire da iOS 8.0 e OS X 10.10, utilizzare WKWebView per aggiungere contenuti Web alla tua app. Non utilizzare UIWebView o WebView.

Quindi dovresti provare una volta con WKWebView .





ios11