iOS Chrome calcule la mauvaise hauteur du document

10

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:

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!

Anzhelika
la source
plus d'informations sont nécessaires ici. Pouvez-vous publier un exemple de code? Le reste du balisage css / html pourrait contribuer aux problèmes, pas seulement la hauteur et la plate
Rachel Gallen
Curieux - dans votre exemple, vous pouvez changer .linksdiv en position: absolute. Est-ce que cela change le comportement que vous voyez? (Je n'ai pas d'iphone à tester)
slynagh
Voici votre exemple de code @Rachel Gallen.
Aaron3219
Essayez également de faire pivoter votre téléphone en mode paysage et vice-versa. Ce sera corrigé. Je pense que c'est un problème avec Chrome et non avec HTML / CSS. Il n'apparaît que dans Chrome et la quantité que vous devez faire défiler vers le bas est la quantité exacte de pixels dans la barre inférieure et supérieure du navigateur Chrome si vous les combinez.
Aaron3219
@slynagh non, ce n'est pas le cas.
Aaron3219

Réponses:

3

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.

Veneseme Tyras
la source