iOS Chrome, belgenin yanlış yüksekliğini hesaplıyor

Sayfanın tüm yüksekliğini doldurmak height: 100%;için html ve gövde etiketleri için kullanıyorum ve bir tarayıcı kapatılıp yeniden açılana kadar iyi çalışıyor. (Mobil cihazlardaki sorunlar nedeniyle 100vh kullanmıyorum https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html )

Yeniden oluşturma adımları:

• İPhone'da Google Chrome'da https://angelika94.github.io/rick/ adresini açın (navigasyonun (Morty ve Beer) sayfanın altına yerleştirildiğini göreceksiniz) css Rick'in ekran görüntüsünü navigasyonlu
• tarayıcıyı kapatın ve çoklu görev navigasyonundan kaldırın: https://support.apple.com/en-us/HT201330
• tarayıcıyı tekrar açın (alt navigasyonun "ilk ekrandan" hareket ettiğini göreceksiniz ve şimdi görmek için kaydırmanız gerekiyor) navigasyon olmadan css Rick'in ekran görüntüsü

bu durumlarda sayfa kendi kendine düzeltilecektir:

• sayfayı güncelle
• cihazı yatay konuma döndürün
• sekmelerle tarayıcının gezinmesini açma ve kapatma
• çok görevli nav'da kapatmadan tarayıcıyı kapatıp yeniden açın

Neden oluyor? Bu davranışı nasıl düzeltebilirim?

Şimdiden teşekkür ederim!

Çok farklı bir sorunum vardı, ancak çalıştığım çözümün durumunuz için de işe yarayabileceğini düşünüyorum, çünkü sayfayı güncellemenin bunu düzelteceğini belirtti.

Bu yüzden çok hızlı bir şekilde kaydırırsanız (mobilde nadir değildir), bazı öğeler yeniden boyanamaz. Her yerde bir çözüm aradı, ancak işe yarayacak hiçbir şey bulamadı.

Sonunda, bir çalışma düzeltmesi buldum:

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

Bu, sayfayı sürekli olarak 3 saniyelik bir döngüde yeniden boyamaya zorlar.

Belki de sürekli olarak değil, sadece 2 saniyede bir saniyenin bir kısmını kaydırmak için ayarlamalıyım:

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

Denedim zoom: 99.99999;, 1ancak bazı vurgulu efektlerde 1'in üzerindeki ölçeğe geçiş yapan belirli öğeler zum nefesini gösterecektir. 99.99999'dan 99.99998'e kadar bu etki görünmez kılmak için benim için çalıştı.

Çok uzun sayfalar için performans sorunları gösterebilecek, ancak belki de olmayabilir, çünkü tarayıcı sadece ekranda görünenleri oluşturmalıdır. Bunu kullandığım sayfalar, çok karmaşık çok katmanlı efektlerle grafik olarak ağırdır ve bunun belirgin bir performans etkisi yoktur.

Görünüşe göre birçok mobil tarayıcı aşırı derecede optimize edilmiş işleme sahip, bu da iyi belgelenmiş birkaç düzeltmeyle ilginç hatalara yol açıyor. Boyamaları zorlamak, bulduğum tek çalışma düzeltmesiydi.

Yeniden boyamaya zorlamak için biraz daha az agresif, belgelenmiş diğer yöntemleri denedim. Kaydırma işleminden sonra sayfaya (görünmez bir şekilde) metin eklemek, örneğin 200 ms durur. Hiçbir şey işe yaramadı, bu yüzden canlandır-tüm-sayfa-sonsuza kadar kesmek.

Sizin durumunuzda, diğer hack'lerin bazıları daha iyi çalışabilir. Bu makalede , yeniden boyama / yeniden akışa neden olan çeşitli şeyler özetlenmiştir, böylece bu şeylerden bazılarını komut dosyası aracılığıyla yapmaya çalışabilirsiniz.