iOS Chrome calcule la mauvaise hauteur du document

Afin de remplir toute la hauteur de la page, j'utilise height: 100%;pour les balises html et body, et cela fonctionne très bien jusqu'à ce qu'un navigateur soit fermé et rouvert. (Je n'utilise pas 100vh en raison de problèmes sur les appareils mobiles https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-Browsers.html )

Étapes à reproduire:

• Ouvrez https://angelika94.github.io/rick/ dans Google Chrome sur iPhone (vous verrez que la navigation (Morty and Beer) est placée en bas de la page) capture d'écran de css Rick avec navigation
• fermez le navigateur et supprimez-le de la navigation multitâche: https://support.apple.com/en-us/HT201330
• ouvrez à nouveau le navigateur (vous verrez que la navigation du bas s'est éloignée du "premier écran" et maintenant vous devez faire défiler pour le voir) capture d'écran de css Rick sans navigation

la page sera corrigée d'elle-même dans les cas suivants:

• page de mise à jour
• faire pivoter l'appareil en mode paysage
• ouvrir et fermer la navigation du navigateur par onglets
• fermer et rouvrir le navigateur sans le fermer dans la navigation multitâche

Pourquoi cela arrive-t-il? Comment puis-je résoudre ce problème?

Merci d'avance!

J'ai eu un problème très différent, mais je pense que la solution que j'ai élaborée peut également fonctionner pour votre situation, car vous avez mentionné que la mise à jour de la page le corrigerait.

J'ai donc eu des problèmes avec Chrome sur Android où si vous faites défiler très rapidement (ce qui n'est pas rare sur mobile), certains éléments ne pourraient pas être re / peints. J'ai cherché partout une solution mais je n'ai rien trouvé qui puisse fonctionner.

Enfin, j'ai trouvé une solution de travail:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {from { zoom: 99.99999%; } to { zoom: 99.99998%; }}

Donc, cela force la page à se repeindre continuellement sur un cycle de 3 secondes.

Peut-être que je devrais le modifier pour ne décaler qu'une fraction de seconde toutes les 2 secondes, au lieu de continuellement:

.pagewrap {
  transform: translateZ(0);
  animation-name: 'repaint';
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

@keyframes repaint {
  0% {
    zoom: 99.99999%;
  }
  99% {
    zoom: 99.99999%;
  }
  100% {
    zoom: 99.99998%;
  }
}

J'ai essayé de le zoom: 99.99999;faire, 1mais certains éléments qui ont changé l'échelle au-dessus de 1 sur certains effets de vol stationnaire montraient la respiration du zoom. Donc, 99,99999 à 99,99998 a été ce qui a fonctionné pour moi pour rendre l'effet invisible.

Solution légèrement hacky qui pourrait présenter des problèmes de performances pour les pages très longues, mais peut-être pas, car le navigateur ne devrait afficher que ce qui est à l'écran. Les pages sur lesquelles j'ai utilisé ceci sont graphiquement lourdes avec beaucoup d'effets multicouches complexes, et cela ne semble pas avoir un impact notable sur les performances.

On dirait que de nombreux navigateurs mobiles ont un rendu excessivement optimisé, ce qui conduit à des échecs originaux avec quelques correctifs bien documentés. Forcer les repeints était le seul correctif que j'ai trouvé.

J'ai essayé d'autres méthodes documentées, un peu moins agressives, pour forcer les repeints. Comme ajouter du texte à la page (de manière invisible) après que le défilement s'arrête pendant 200 ms, etc. Cependant, rien n'a fonctionné, donc mon hack d'animation sur toute la page.

Dans votre cas, certains de ces autres hacks peuvent fonctionner mieux. Cet article décrit toutes les différentes choses qui provoquent des repeints / reflows afin que vous puissiez essayer de faire certaines de ces choses via un script.