iOS Chrome oblicza niewłaściwą wysokość dokumentu

Aby wypełnić całą wysokość strony, używam height: 100%;tagów HTML i body, i działa dobrze, dopóki przeglądarka nie zostanie zamknięta i ponownie otwarta. (Nie używam 100vh z powodu problemów na urządzeniach mobilnych https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html )

Kroki ku reprodukcji:

• Otwórz https://angelika94.github.io/rick/ w Google Chrome na iPhonie (zobaczysz, że nawigacja (Morty and Beer) znajduje się na dole strony) zrzut ekranu css Rick z nawigacją
• zamknij przeglądarkę i usuń ją z nawigacji wielozadaniowej: https://support.apple.com/en-us/HT201330
• ponownie otwórz przeglądarkę (zobaczysz, że dolna nawigacja przesunęła się z „pierwszego ekranu” i teraz musisz przewinąć, aby ją zobaczyć) zrzut ekranu css Rick bez nawigacji

strona zostanie naprawiona sama w tych przypadkach:

• strona aktualizacji
• obróć urządzenie do pozycji poziomej
• otwieraj i zamykaj nawigację w przeglądarce za pomocą kart
• zamknij i ponownie otwórz przeglądarkę bez zamykania jej w nawigacji wielozadaniowej

Dlaczego tak się dzieje? Jak mogę naprawić to zachowanie?

Z góry dziękuję!

Miałem zupełnie inny problem, ale myślę, że wypracowane przeze mnie rozwiązanie może również działać w Twojej sytuacji, ponieważ wspomniałeś, że aktualizacja strony to naprawi.

Miałem więc problemy z Chrome na Androidzie, gdzie jeśli przewijasz bardzo szybko (nierzadko na urządzeniach mobilnych), niektóre elementy nie mogłyby zostać ponownie / pomalowane. Wszędzie szukałem rozwiązania, ale nie mogłem znaleźć niczego, co by działało.

Wreszcie wymyśliłem działającą poprawkę:

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

To powoduje, że strona jest stale odświeżana w 3-sekundowym cyklu.

Może powinienem go dostosować, aby zmieniał się tylko na ułamek sekundy co 2 sekundy, zamiast ciągle:

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

Starałem zoom: 99.99999;się 1jednak pewne elementy, które przeniesieni skali powyżej 1 na niektóre efekty unoszą pokaże oddychanie powiększenia. Więc od 99.99999 do 99.99998 działało dla mnie, aby efekt był niewidoczny.

Nieco zręczne rozwiązanie, które może powodować problemy z wydajnością bardzo długich stron, ale może nie, ponieważ przeglądarka powinna wyświetlać tylko to, co jest na ekranie. Strony, z których korzystałem, są ciężkie graficznie i zawierają wiele złożonych efektów wielowarstwowych, co nie wydaje się mieć zauważalnego wpływu na wydajność.

Wygląda na to, że wiele przeglądarek mobilnych ma nadmiernie zoptymalizowane renderowanie, co prowadzi do dziwnych awarii z kilkoma dobrze udokumentowanymi poprawkami. Wymuszanie przemalowania było jedyną działającą poprawką, jaką znalazłem.

Próbowałem innych, nieco mniej agresywnych, udokumentowanych metod wymuszania odmalowania. Jak dodawanie tekstu do strony (niewidocznie) po zatrzymaniu przewijania na 200 ms i tak dalej. Nic jednak nie działało, więc mój animowany hack na całą stronę na zawsze.

W twoim przypadku niektóre z innych hacków mogą działać lepiej. W tym artykule opisano wszystkie różne rzeczy, które powodują odmalowanie / ponowne wycieki, abyś mógł spróbować wykonać niektóre z tych czynności za pomocą skryptu.