iOS Chrome menghitung ketinggian dokumen yang salah

Untuk mengisi seluruh ketinggian halaman, saya menggunakan height: 100%;html dan tag tubuh, dan berfungsi baik sampai browser ditutup dan dibuka kembali. (Saya tidak menggunakan 100vh karena masalah pada perangkat seluler https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in -some-mobile-browsers.html )

Langkah-langkah mereproduksi:

• Buka https://angelika94.github.io/rick/ di Google Chrome di iPhone (Anda akan melihat bahwa navigasi (Morty and Beer) ditempatkan di bagian bawah halaman) tangkapan layar css Rick dengan navigasi
• tutup browser dan hapus dari navigasi multitasking: https://support.apple.com/en-us/HT201330
• buka browser lagi (Anda akan melihat bahwa navigasi bawah dipindahkan dari "layar pertama" dan sekarang Anda perlu gulir untuk melihatnya) tangkapan layar css Rick tanpa navigasi

halaman akan diperbaiki dengan sendirinya dalam hal ini:

• perbarui halaman
• putar perangkat ke lanskap
• buka dan tutup navigasi browser berdasarkan tab
• tutup dan buka kembali peramban tanpa menutupnya di multitasking nav

Mengapa itu terjadi? Bagaimana saya bisa memperbaiki perilaku ini?

Terima kasih sebelumnya!

Saya memiliki masalah yang sangat berbeda, tetapi saya pikir solusi yang saya kerjakan dapat bekerja untuk situasi Anda juga, karena Anda menyebutkan memperbarui halaman akan memperbaikinya.

Jadi saya punya masalah dengan chrome di android di mana jika Anda menggulir dengan sangat cepat (tidak jarang pada ponsel), beberapa elemen akan gagal untuk mendapatkan kembali / dicat. Mencari solusi di mana-mana tetapi tidak dapat menemukan apa pun yang akan berhasil.

Akhirnya, saya menemukan perbaikan yang berfungsi:

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

Jadi yang dilakukan adalah memaksa halaman untuk mengecat ulang terus menerus pada siklus 3 detik.

Mungkin saya harus mengubah hanya bergeser sepersekian detik setiap 2 detik, bukannya terus-menerus:

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

Saya mencoba zoom: 99.99999;untuk1 tetapi unsur-unsur tertentu yang dialihkan skala di atas 1 pada beberapa efek melayang-layang akan menunjukkan pernapasan zoom. Jadi 99,99999 hingga 99,99998 adalah yang berhasil bagi saya untuk membuat efeknya tidak terlihat.

Solusi sedikit peretasan yang dapat menyajikan masalah kinerja untuk halaman yang sangat panjang, tetapi mungkin tidak, karena browser hanya boleh menampilkan apa yang ada di layar. Halaman-halaman yang saya gunakan ini berat secara grafis dengan banyak efek multi-layer yang kompleks, dan ini tampaknya tidak memiliki dampak kinerja yang nyata.

Sepertinya banyak peramban seluler memiliki perenderan yang dioptimalkan secara berlebihan, yang mengarah pada kegagalan unik dengan beberapa perbaikan yang terdokumentasi dengan baik. Memaksa pengecatan ulang adalah satu-satunya perbaikan yang saya temukan.

Saya mencoba metode lain, sedikit kurang agresif, yang terdokumentasi untuk memaksa pengecatan ulang. Seperti menambahkan beberapa teks ke halaman (tanpa terlihat) setelah menggulir berhenti selama 200 ms, dan semacamnya. Namun, tidak ada yang berhasil, jadi hack saya yang hidup-sepanjang-halaman-selamanya.

Dalam kasus Anda, beberapa peretasan lainnya mungkin berfungsi lebih baik. Artikel ini menguraikan semua berbagai hal yang menyebabkan repaints / reflow sehingga Anda dapat mencoba melakukan beberapa hal melalui skrip.