iOS Chrome berechnet die falsche Höhe des Dokuments

10

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:

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!

Anzhelika
quelle
Weitere Informationen werden hier benötigt. Können Sie ein Codebeispiel posten? Der Rest des CSS / HTML-Markups könnte zu den Problemen beitragen, nicht nur zur Höhe und Plattform
Rachel Gallen
Neugierig - in Ihrem Beispiel können Sie .linksdiv in ändern position: absolute. Ändert dies das Verhalten, das Sie sehen? (Ich habe kein iPhone zum Testen)
Slynagh
Hier ist Ihr Codebeispiel @Rachel Gallen.
Aaron3219
Versuchen Sie außerdem, Ihr Telefon in den Querformatmodus und wieder zurück zu drehen. Es wird behoben. Ich denke, dies ist ein Problem mit Chrome und nicht mit HTML / CSS. Es wird nur in Chrome angezeigt und der Betrag, den Sie nach unten scrollen müssen, entspricht genau der Anzahl der Pixel, die die untere und obere Leiste des Chrome-Browsers ergeben, wenn Sie sie kombinieren.
Aaron3219
@slynagh nein tut es nicht.
Aaron3219

Antworten:

3

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.

Veneseme Tyras
quelle