iOS Chrome berechnet die falsche Höhe des Dokuments

Um die gesamte Höhe der Seite auszufüllen, verwende ich height: 100%;für HTML- und Body-Tags und es funktioniert einwandfrei, bis ein Browser geschlossen und wieder geöffnet wird. (Ich verwende 100vh nicht aufgrund von Problemen auf Mobilgeräten https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browser.html )

Schritte zum Reproduzieren:

• Öffnen Sie https://angelika94.github.io/rick/ in Google Chrome auf dem iPhone (Sie werden sehen, dass die Navigation (Morty und Beer) unten auf der Seite platziert ist). Screenshot von CSS Rick mit Navigation
• Schließen Sie den Browser und entfernen Sie ihn aus der Multitasking-Navigation: https://support.apple.com/en-us/HT201330
• Öffnen Sie den Browser erneut (Sie werden sehen, dass die untere Navigation vom "ersten Bildschirm" verschoben wurde und Sie jetzt scrollen müssen, um ihn zu sehen). Screenshot von CSS Rick ohne Navigation

Die Seite wird in folgenden Fällen von selbst repariert:

• Seite aktualisieren
• Drehen Sie das Gerät in den Querformat
• Öffnen und schließen Sie die Navigation des Browsers über Registerkarten
• Schließen Sie den Browser und öffnen Sie ihn erneut, ohne ihn in der Multitasking-Navigation zu schließen

Warum passiert das? Wie kann ich dieses Verhalten beheben?

Vielen Dank im Voraus!

Ich hatte ein ganz anderes Problem, aber ich denke, die Lösung, die ich ausgearbeitet habe, könnte auch für Ihre Situation funktionieren, da Sie erwähnt haben, dass das Aktualisieren der Seite das Problem beheben würde.

Ich hatte also Probleme mit Chrome auf Android. Wenn Sie sehr schnell scrollen (auf Mobilgeräten nicht ungewöhnlich), werden einige Elemente nicht neu gezeichnet. Überall nach einer Lösung gesucht, aber nichts gefunden, was funktionieren würde.

Schließlich fand ich eine funktionierende Lösung:

.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%; }}

Dies zwingt die Seite dazu, im 3-Sekunden-Zyklus ständig neu zu malen.

Vielleicht sollte ich es so anpassen, dass es alle 2 Sekunden nur für den Bruchteil einer Sekunde wechselt, anstatt kontinuierlich:

.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%;
  }
}

Ich habe versucht zoom: 99.99999;, 1aber bestimmte Elemente, die bei einigen Hover-Effekten die Skalierung über 1 verschoben haben, zeigen die Zoomatmung. 99.99999 bis 99.99998 haben für mich funktioniert, um den Effekt unsichtbar zu machen.

Etwas hackige Lösung, die bei sehr langen Seiten zu Leistungsproblemen führen kann, aber möglicherweise nicht, da der Browser nur das rendern sollte, was auf dem Bildschirm angezeigt wird. Die Seiten, auf denen ich dies verwendet habe, sind grafisch schwer mit vielen komplexen mehrschichtigen Effekten, und dies scheint keine merklichen Auswirkungen auf die Leistung zu haben.

Es scheint, als hätten viele mobile Browser das Rendering übermäßig optimiert, was zu eigenartigen Fehlern mit wenigen gut dokumentierten Korrekturen führt. Das Erzwingen von Neulackierungen war die einzige funktionierende Lösung, die ich gefunden habe.

Ich habe andere, etwas weniger aggressive, dokumentierte Methoden ausprobiert, um Neulackierungen zu erzwingen. Als würde man der Seite (unsichtbar) Text hinzufügen, nachdem der Bildlauf für 200 ms angehalten wurde, und so weiter. Nichts hat funktioniert, also mein Hack für immer.

In Ihrem Fall funktionieren einige dieser anderen Hacks möglicherweise besser. Dieser Artikel beschreibt die verschiedenen Dinge, die Repaints / Reflows verursachen, sodass Sie versuchen können, einige dieser Dinge per Skript auszuführen.