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

j'écris juste un code, essayez avec un par un

• Essayez avec en dessous

  self.automaticallyAdjustsScrollViewInsets = false
  

• Essayez avec en dessous

  [self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
  

• Essayez avec en dessous (modification du code)

  header {
      height: 60px;
      background-color: @mainColor;
      color: #ffffff;
      padding: 10px;
      text-align: center;
      position: fixed;
      width: 100%;
      z-index: 1;
      transform: translateZ(0);
      -moz-transform: translatez(0);
      -ms-transform: translatez(0);
      -o-transform: translatez(0);
      -webkit-transform: translateZ(0);
      -webkit-font-smoothing: antialiased;
  }
  

  Et quelques liens utiles pourraient être utiles pour vous!

• http://ayogo.com/blog/ios11-viewport/

• https://forums.developer.apple.com/thread/90472
• comment corriger l'élément d'entrée iOS 11 dans les modules fixes bogue
• https://github.com/PierBover/ios-iframe-fix
• https://stanko.github.io/ios-safari-scoll-position-fixed/

D'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 .

position: fixed a toujours été un problème avec iOS. Il semble que dans chaque version de iOS le problème persiste. Maintenant, je n'ai rien trouvé concernant le changement de comportement de votre application de iOS 10 à 11, vous pourriez considérer signalant ceci comme un bug ; d'autre part ayant vu les multitudes de gens qui rencontré ce problème et le fait que affecte plus ou moins tous les versions récentes de iOS je suggérerais de ne pas utiliser position: fixed .

la solution la plus courante est transform: translateZ(0) , cela ne fonctionne pas seulement sur iOS et empêcher "tout possible clignotant , il oblige également le navigateur à utiliser l'accélération matérielle pour accéder au GPU faire voler les pixels . Il devrait fonctionner aussi sans le préfixe -webkit- de iOS 9.

j'ai eu ce problème très similaire avec un projet Cordova construit pour iOS, qui utilise un webview. Cordova utilise UIWebView par défaut comme moteur webview et j'ai essayé toutes les corrections possibles mentionnées dans ce thread et bien d'autres. Enfin notre seule solution était de changer le moteur de webview de UIWebView à WKWebView ( https://developer.apple.com/documentation/webkit/wkwebview ). Avec Cordova, l'introduction de la WKWebView est assez simple avec un plugin https://github.com/apache/cordova-plugin-wkwebview-engine

après l'introduction de WKWebView et le traitement de certains des problèmes qu'il provoque, nous ne sommes plus confrontés à la scintillement ou la disparition des éléments fixes positionnés tout en défilant dans iOS 11.

nous avions le même problème et il a été corrigé avec moins de 2 plugins

https://github.com/apache/cordova-plugin-wkwebview-engine https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix

le premier plugin changera WebView par défaut en WKWebView et le second plugin fournira la correction pour le problème CORS que nous voyons pour l'utilisation de WKWebView.

le truc est de forcer l'accélération du GPU. Pour ce faire, il faut ajouter translate3d à l'élément #header .

transform: translate3d(0,0,0);

si les éléments imbriqués dans l'élément #header continuent à disparaître, ajouter translate3d .

position fixe ne fonctionne pas bien avec iOS, mais j'ai utilisé position absolue dans Mes applications cordova qui ne cause jamais de problème pour moi.

vous avez peut-être déjà vu cet article sur quelques modifications dans iOS 11 , mais si non peut-être qu'il s'appliquerait à votre situation?

une des options viewport-fit: contain/cover/auto ?

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

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

dans le passé, il fonctionne vraiment bien sur iOS. Veuillez noter qu'il s'agit de position:sticky règle requise 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 du haut, vous pouvez ajuster la règle top:0; de zéro à n'importe quel nombre dans px.

et un dernier mot: cet élément collant n'extraira pas l'élément du flux de documents et agira comme un élément de document ordinaire (comme div avec position:static ou relative ), mais pas comme un élément positionné absolu (dans le cas de fixed ou absolute ).

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

j'ai lutté contre ce même problème moi-même.

le problème (du moins tel qu'il se manifeste dans l'application sur laquelle je travaille) ne semble se produire que sur des écrans qui sont une combinaison de grande taille (en ce qu'ils nécessitent beaucoup de défilement) et assez complexe.

en général, du moins pour moi, le problème ne semble se manifester que lorsque le moment défile.

bien qu'il y ait un écran en particulier, qui contient 15 rangées d'images de gauche-droite-scrollable, qui cassera la tête/pied de page peu importe la vitesse à laquelle vous le faites défiler.

pour ma défense... J'ai eu absolument rien à voir avec le dessin. :- )

en tout cas...

après avoir beaucoup cherché une expérimentation, j'ai réussi à trouver une" solution " en quelque sorte.

Attention, Je ne dis pas que c'est la voie à suivre ici. Mais peut-être quelqu'un avec plus d'expérience que moi dans l'espace d'application mobile, peut prendre cette information et extrapoler quelque chose de moins sucky à partir de lui.

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 momentum scrolling pour votre application. Ce qui n'est pas grand, je le sais. Mais comme conséquence de réduire l'utilisateur possibilité de faire défiler très rapidement, le rendu à l'écran semble être en mesure de garder et le problème disparaît.

encore une fois, je ne recommande pas cette solution comme une solution viable pour la production. Car il n'est évidemment pas la grande.

je propose ceci plus comme un tremplin possible à une solution réelle, dans l'espoir qu'il aide.

===>>> mise à jour:

j'ai une solution. Mais, comme d'autres avant moi ont souligné, j'ai dû éviter l'utilisation de la position fixe.

à la place, 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é le défilement seulement dans la section principale de contenu.

si cela peut aider, j'ai le POC que j'ai mis ensemble disponible sur BitBucket

cela fonctionne pour moi

position: sticky

j'ai eu ce même problème avec à la fois position:fixe et position:collante.

#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