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!

— Anzhelika
sumber

diperlukan lebih banyak informasi di sini. Bisakah Anda memposting contoh kode? Sisa markup css / html dapat berkontribusi pada masalah, bukan hanya tinggi dan platform

— Rachel Gallen

Ingin tahu - dalam contoh Anda, Anda dapat mengubah .linksdiv menjadi position: absolute. Apakah ini mengubah perilaku yang Anda lihat? (Saya tidak punya iphone untuk diuji)

— slynagh

Ini adalah contoh kode Anda @Rachel Gallen.

— Aaron3219

Selain itu, coba putar ponsel Anda ke mode lansekap dan kembali lagi. Itu akan diperbaiki. Saya pikir ini masalah dengan Chrome dan bukan HTML / CSS. Ini hanya muncul di Chrome dan jumlah yang harus Anda gulir ke bawah adalah jumlah piksel yang tepat di bagian bawah dan atas bilah browser Chrome yang dihasilkan jika Anda menggabungkannya.

— Aaron3219

@slynagh tidak tidak.

— Aaron3219

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.

— Veneseme Tyras
sumber