web-dev-qa-db-fra.com

Existe-t-il une solution permettant d'éviter que SFSafariViewController ne cache les en-têtes de position fixe?

SFSafariViewController a ce bogue qui n'est pas reproductible dans Safari. 

Régulièrement, il occultera le haut d'un panneau fixe derrière le nom du site/done chrome. 

Cela se produit car, en interne, la synchronisation entre la hauteur réelle de la page et la taille de l'en-tête de rétrécissement chromé n'est plus synchronisée. 

Bon petit en-tête

 correct small header

Mauvais petit en-tête (le chrome SF devrait être petit mais gros)

 sad

Bon gros en-tête

 correct big header

Ce problème a été signalé ailleurs sur: https://meta.stackexchange.com/questions/279792/new-ios-chat-headers-occasionally-hide-hide-hide-safari-navigation-controls-when-vi et est un problème dans iOS 9 et versions ultérieures (toujours un problème dans 12.0.1) 

Pour reproduire une application factice avec SFViewController et accéder à un site avec un en-tête fixe tel que bbs.boingboing.net, cliquez sur et parcourez quelques rubriques. 

Comme ce bogue a maintenant quelques années, je me demande s’il existe une solution de contournement qui ne consiste pas à ajouter un remplissage général en haut de l’en-tête? 

Repro minimal

Faire une page avec ce HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        height: 2000px;
        background-color: green;
      }
      header {
        width: 100%;
        height: 50px;
        background-color: red;
        color: white;
        position: fixed;
        top: 0;
      }
    </style>
  </head>
  <body>
    <header>Hello</header>
  </body>
</html>

Ouvrez SafariViewController (hébergez-le en ligne, puis envoyez un lien par e-mail, l'application gmail sous iOS utilise également Safari View Controller, ainsi que l'application Discourse). 

Faites défiler rapidement vers le bas

La moitié de l'en-tête se cache. 

Les incrustations ne font aucune différence, l'encart pour top est égal à 0, la propriété de la fenêtre de couverture ne fait pas de différence. 

iosiphonesfsafariviewcontroller
8
Sam Saffron

- Le problème

Les tests effectués dans différents environnements montrent que le problème n'apparaît que dans SFSafariView et que l'application safari d'origine n'est pas infectée. Et il apparaît uniquement sur l'iPhone avec l'encoche en mode portrait lorsque l'utilisateur enrichit la fin de la page et fait défiler à nouveau. Donc, la page doit monter et la barre de navigation réapparaît automatiquement et un conflit va se produire.

 iPhone 8 iPhone 8 - Bas de la page - Portrait (OK)

 iPhone XR - Portrait iPhone XR - Bas de la page - Portrait (NON OK)

 iPhone XR - Landscape iPhone XR - Bas de la page - Portrait (OK)

 iPad Pro 9.7 - Landscape iPad Pro 9.7 - Bas de la page - Paysage (OK)

Dans certains cas, il peut ne pas s'agir du bogue de SFSafaryViewController. 

  • Donc, si vous avez accès aux développeurs frontaux du site que vous souhaitez intégrer à la SFSafaryViewController, introduisez-leur les éléments suivants:

- Encart de zone de sécurité

Par conséquent, pour résoudre ce problème, Apple a implémenté la nouvelle safe-area-inset, un ensemble prédéfini de 4 constantes et une nouvelle fonction CSS appelée constant(). Les constantes prédéfinies pour la zone de sécurité sont les suivantes: safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom et save-area-inset-left. Lorsque vous combinez ces quatre constantes, vous pouvez référencer la taille actuelle de l'encart de la zone de sécurité de chaque côté. La constant() fonctionne partout où une var() fonctionne.

Il existe de nombreux sites qui vous expliquent comment adopter une page Web sur iPhone X. En voici un .

Peut-être pourraient-ils essayer de placer la div en dehors de la partie déroulante et régler la position. Donc, si vous avez un code où il défile:

<div id="scroll-container">
  <div id="scrollable">
  </div>
<div>

Tels que n'importe quel élément du conteneur div scroll, il défilera.

S'ils le placent en dehors de la partie déroulante:

<div id="scroll-container">
<div>
<div id="not-scrollable">
</div>

et mettez position:fixed; ou position:absolute; ou position: sticky ou device-fixed; ou etc. dans le fichier CSS pour #not-scrollable, il ne devrait pas défiler.

  • Ainsi, si vous n'avez pas accès aux développeurs frontaux du site que vous souhaitez incorporer dans la SFSafaryViewController, essayez ce qui suit (Non recommandé):

    • Essayez de tourner barCollapsingsafaryViewController.configuration.barCollapsingEnabled = false
    • ou essayez de l'intégrer dans un navigateurController et de vous débarrasser de l'en-tête de SFView
    • ou Utilisez Implémenter une WKWebView en plein écran avec le contrôleur au lieu de SFSafaryViewController.

Note (Pour ceux qui jouent avec la barre d'outils)

  • Vous pouvez utiliser les méthodes de délégation pour déterminer l'état de chargement et l'état chargé de la page Web et l'activer/le désactiver pour contourner le bogue d'initialisation de la présentation de la page. (Vous pouvez aussi utiliser le délai manuel)
  • Vous pouvez utiliser des API privées pour masquer ou afficher la barre d'outils inférieure. Mais ce n'est pas préféré et il va rejeter de Apple Appstore. 
2
Mojtaba Hosseini

Que faire si vous remplacez la prefersStatusBarHidden comme ci-dessous?

override func prefersStatusBarHidden() -> Bool {
    return true
}

Et vous voudrez peut-être ajouter un bouton de rechargement manuellement :-( 

0
PrathapG