Correction de la disparition de l'en-tête lors du défilement vers le bas dans la vue web dans iOS 11

Question

J'ai une application iOS native avec une vue web pour afficher le 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 la mise à niveau vers iOS 11, tout fonctionnait bien. Maintenant, lorsque je fais défiler la page vers le bas/vers le haut, 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.

Answer 1

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

• Essayez avec les éléments suivants

  self.automaticallyAdjustsScrollViewInsets = false

• Essayez avec les éléments suivants

  [self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];

• Essayez avec les éléments suivants (modifiez votre 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 vous être utiles !

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

• https://forums.developer.apple.com/thread/90472

• Comment corriger le bogue de l'élément de saisie dans les modales fixes d'iOS 11

• https://github.com/PierBover/ios-iframe-fix

• https://stanko.github.io/ios-safari-scoll-position-fixed/

Extrait de la note officielle d'Apple :

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.

Vous devriez donc essayer une fois avec WKWebView .

Answer 2

position: fixed a toujours a été a problème avec iOS. Il semble que dans chaque version d'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 signaler ce problème comme un bogue d'autre part, ayant vu les multitudes de personnes qui ont rencontré ce problème et le fait qu'il affecte plus ou moins les personnes qui en ont besoin. tous les dernières versions d'iOS, je vous conseille de ne pas utiliser position: fixed .

La solution de contournement la plus courante est transform: translateZ(0) cela ne fonctionne pas seulement sur iOS et empêche toute éventuelle scintillement En outre, il oblige le navigateur à utiliser l'accélération matérielle pour accéder au GPU. faire voler les pixels . Il devrait également fonctionner sans le préfixe -webkit- à partir d'iOS 9.

Answer 3

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

Après avoir introduit WKWebView et traité certains des problèmes qu'il cause, nous ne rencontrons plus le scintillement ou la disparition des éléments positionnés de manière fixe lors du défilement dans iOS 11.

Answer 4

Nous avons eu le même problème et il a été résolu avec les 2 plugins suivants

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

Le premier plugin changera le WebView par défaut en WKWebView et le deuxième plugin fournira une correction pour le problème CORS que nous voyons en utilisant WKWebView.

Answer 5

L'astuce consiste à forcer l'accélération du GPU. Pour ce faire, ajoutez translate3d à la #header élément.

transform: translate3d(0,0,0);

Si des éléments imbriqués à l'intérieur du #header élément continuent de disparaître ajouter translate3d à eux aussi.