web-dev-qa-db-fra.com

L'en-tête fixe disparaît lors du défilement dans la vue Web dans iOS 11

J'ai une application iOS native avec une vue Web pour afficher du contenu Web. J'ai un en-tête fixe dans mon application avec les propriétés suivantes:

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

Avant de passer à iOS 11, tout fonctionnait bien. Maintenant, lorsque je fais défiler l'écran vers le haut/le bas, l'en-tête disparaît pendant le défilement et lorsque le défilement est terminé, l'en-tête réapparaît.

Ceci peut également être reproduit dans Xcode 8.

ioscsswebviewios11
41
Bergerova

Je suis juste en train d'écrire du code, essayez un par un

De Apple note officielle:

Important:

À partir de iOS 8.0 et OS X 10.10, utilisez WKWebView pour ajouter du contenu Web à votre application. N'utilisez pas UIWebView ou WebView.

Donc, vous devriez essayer une fois avec WKWebView.

15
iPatel

position: fixedatoujoursétéaproblème avec iOS. Il semble que le problème persiste dans toutes les versions d'iOS. Maintenant, je ne pouvais rien trouver concernant le changement de comportement de votre application d'iOS 10 à 11, vous pourriez envisager de le signaler comme un bogue ; Par contre, ayant vu la multitude de personnes qui ont rencontré ce problème et le fait que cela affecte plus ou moins tous les versions récentes d'iOS, je suggérerais de ne pas utiliser position: fixed.

La solution la plus courante est transform: translateZ(0) , cela ne fonctionne pas uniquement sur iOS et empêche tout possible scintillement , il oblige également le navigateur à utiliser l'accélération matérielle pour accéder. le GPU pour faire voler les pixels . Cela devrait également fonctionner sans le préfixe -webkit- De iOS 9.

12
Paolo Forgia

Nous avons eu le même problème et il a été corrigé avec moins de 2 plugins

https://github.com/Apache/cordova-plugin-wkwebview-enginehttps://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix

Le premier plug-in modifiera WebView par défaut en WKWebView et le second plug-in corrigera le problème CORS que nous voyons lors de l'utilisation de WKWebView.

6
Dilip

J'ai eu ce problème très similaire avec un projet Cordova construit pour iOS, qui utilise une vue Web. Cordova utilise par défaut UIWebView comme moteur de visualisation Web et j'ai essayé tous les correctifs possibles mentionnés dans ce fil et bien d'autres. Enfin, notre seule solution consistait à modifier le moteur de visualisation Web de UIWebView à WKWebView ( https://developer.Apple.com/documentation/webkit/wkwebview ). Avec Cordova, l’introduction de WKWebView est assez simple avec un plugin https://github.com/Apache/cordova-plugin-wkwebview-engine

Après avoir présenté WKWebView et traité certains problèmes, nous ne rencontrons plus les éléments fixes et en position de scintillement ou de disparition disparus lors du défilement dans iOS 11.

6
calle

L'astuce consiste à forcer l'accélération GPU. Faites ceci en ajoutant translate3d à la #header élément.

transform: translate3d(0,0,0);

Si des éléments sont imbriqués dans la #header élément continue de disparaître ajouter translate3d à eux aussi.

4
Dedering

J'ai eu le même problème avec les deux positions: fixe et position: collante. Passer de UIWebView à WKWebView a résolu le problème pour moi:

#import <WebKit/WebKit.h>

....

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

"À partir de iOS 8.0 et OS X 10.10, utilisez WKWebView pour ajouter du contenu Web à votre application. N'utilisez pas UIWebView ou WebView."

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

1
claytronicon

La position corrigée ne fonctionne pas bien avec iOS, mais j’ai utilisé la position absolue dans mes applications Cordova, ce qui ne me cause aucun problème.

1
Tapas

Vous avez peut-être déjà vu ce message sur quelques modifications dans iOS 11 , mais si ce n'était pas le cas, cela s'appliquerait-il à votre situation?

Un de viewport-fit: contain/cover/auto Les options?

Ou changer votre code pour utiliser une valeur constant pour le padding-top?

1
Ben

ça marche pour moi

position: sticky
0
Lauyonggang

Je me suis battu contre ce même problème moi-même.

Le problème (du moins comme le montre l’application sur laquelle je travaille) semble ne se produire que sur des écrans combinant hauteur (en ce sens qu’ils nécessitent beaucoup de défilement) et assez complexes.

En règle générale, du moins pour moi, le problème ne semble se manifester vraiment que lorsque le défilement du momentum commence.

Bien qu’il existe un écran en particulier, qui contient 15 rangées d’images défilables de gauche à droite, il casse la tête/le pied de page peu importe la lenteur avec laquelle vous le faites défiler.

Pour ma propre défense ... j'avais absolument rien à voir avec la conception. :-)

À tout prix...

Après avoir longuement cherché une expérimentation, j'ai réussi à trouver une "solution".

Remarquez que je ne prétends pas que c'est la voie à suivre ici. Mais peut-être que quelqu'un qui a plus d'expérience que moi dans l'espace des applications mobiles peut prendre cette information et en extrapoler quelque chose de moins gabarit.

La première pièce ressemble à ceci:

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

Et puis pour le conteneur qui agit comme le corps principal de votre écran:

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

Cela va tuer l'élan de défilement pour votre application. Ce qui n'est pas génial, je sais. Mais en raison de la réduction de la capacité de l'utilisateur à faire défiler très rapidement, le rendu de l'écran semble pouvoir suivre et le problème disparaît.

Encore une fois, je ne recommande pas cela comme une solution viable pour la production. Parce que ce n'est évidemment pas génial.

Je propose cela plus comme un tremplin possible vers une solution réelle, dans l'espoir que cela aide.

=== >>> UPDATE:

J'ai une solution de travail. Mais, comme l'ont déjà souligné d'autres avant moi, je devais éviter l'utilisation du positionnement fixe.

Au lieu de cela, j'ai utilisé le positionnement absolu pour définir les sections En-tête, Pied de page et Contenu principal de la page. Puis autorisé à faire défiler uniquement dans la section Contenu principal.

Si cela aide, j'ai le POC que j'ai mis ensemble disponible sur BitBucket

0
Oook

Avez-vous essayé d'utiliser position:sticky au lieu de position:fixed?

Dans le passé, cela fonctionne vraiment bien sur iOS. S'il vous plaît noter que c'est position:sticky règle modifiée top à définir.

Donc, la solution finale dans votre cas devrait être:

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

Aussi, si vous avez besoin d’un décalage supplémentaire par le haut, vous pouvez ajuster top:0; règle de zéro à n’importe quel nombre en px.

Et une dernière remarque: c’est un élément collant qui n’extrait pas d’élément du flux de documents et agit comme un élément de document ordinaire (comme div avec position:static ou relative), mais pas comme un élément de positionnement absolu (dans le cas de fixed ou absolute).

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

0
Andrew Ymaz