Pengguliran iPad Safari menyebabkan elemen HTML menghilang dan muncul kembali dengan penundaan

Saat ini saya sedang mengembangkan aplikasi web menggunakan html5 dan jQuery untuk iPad Safari. Saya mengalami masalah di mana area gulir besar menyebabkan elemen-elemen yang offscreen muncul setelah penundaan ketika saya gulir ke bawah ke mereka.

Yang saya maksud dengan itu adalah, jika saya memiliki deretan gambar (atau bahkan div dengan gradien) yang offscreen, ketika saya gulir ke bawah (atau ke atas) ke sana, perilaku yang diharapkan adalah agar elemen muncul di layar sebagai Saya menggulir ke sana.

Namun, yang saya lihat adalah bahwa elemen tidak muncul sampai saya mengangkat jari saya dari layar dan scroller menyelesaikan semua animasinya.

Ini menyebabkan masalah yang sangat mencolok bagi saya, membuat semuanya terlihat berombak, meskipun tidak. Saya menduga iPad Safari sedang mencoba melakukan sesuatu untuk menghemat memori. Apakah ada cara di mana saya dapat mencegah ini berombak terjadi. Selain itu, saya juga akan menghargai jika ada yang bisa menjelaskan apa yang sebenarnya dilakukan oleh Safari iPad.

Anda perlu menipu browser untuk menggunakan akselerasi perangkat keras dengan lebih efektif. Anda dapat melakukan ini dengan transformasi 3d kosong:

-webkit-transform: translate3d(0,0,0)

Khususnya, Anda akan membutuhkan ini pada elemen anak yang memiliki position:relative;deklarasi (atau, lakukan saja dan lakukan untuk semua elemen anak).

Bukan perbaikan yang dijamin, tetapi cukup berhasil sebagian besar waktu.

Kiat topi: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Ini adalah jawaban lengkap untuk pertanyaan saya. Saya awalnya menandai jawaban @Colin Williams sebagai jawaban yang benar, karena membantu saya mendapatkan solusi lengkap. Seorang anggota komunitas, @ Slipp D. Thompson, mengedit pertanyaan saya, setelah sekitar 2,5 tahun saya menanyakannya, dan mengatakan bahwa saya menyalahgunakan format Tanya Jawab SO. Dia juga mengatakan kepada saya untuk secara terpisah memposting ini sebagai jawabannya. Jadi, inilah jawaban lengkap yang memecahkan masalah saya:

@Colin Williams, terima kasih! Jawaban Anda dan artikel yang Anda tautkan memberi saya petunjuk untuk mencoba sesuatu dengan CSS.

Jadi, saya menggunakan translate3d sebelumnya. Ini menghasilkan hasil yang tidak diinginkan. Pada dasarnya, itu akan memotong dan BUKAN elemen RENDER yang offscreen, sampai saya berinteraksi dengan mereka. Jadi, pada dasarnya, dalam orientasi lansekap, setengah dari situs saya yang offscreen tidak ditampilkan. Ini adalah aplikasi web iPad, karena saya sedang dalam perbaikan.

Menerapkan translate3d ke elemen-elemen yang relatif diposisikan memecahkan masalah untuk elemen-elemen itu, tetapi elemen-elemen lain berhenti di-render, setelah offscreen. Elemen yang saya tidak bisa berinteraksi dengan (karya seni) tidak akan pernah merender lagi, kecuali saya memuat ulang halaman.

Solusi lengkap:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Sekarang, meskipun ini mungkin bukan solusi yang paling "efisien", itu adalah satu-satunya yang berfungsi. Mobile Safari tidak membuat elemen-elemen yang offscreen, atau terkadang membuat tidak menentu, saat menggunakan -webkit-overflow-scrolling: touch. Kecuali jika translate3d diterapkan ke semua elemen lain yang mungkin menjadi layar karena gulir itu, elemen-elemen itu akan dipotong setelah menggulir.

Jadi, terima kasih lagi, dan harap ini membantu jiwa yang hilang lainnya. Ini pasti sangat membantu saya!

Menargetkan semua elemen kecuali html: *:not(html) menyebabkan masalah pada elemen lain dalam kasus saya. Itu memodifikasi konteks penumpukan, menyebabkan beberapa indeks-z rusak.

Kita sebaiknya mencoba menargetkan elemen yang tepat dan menerapkannya -webkit-transform: translate3d(0,0,0)saja.

Sunting: terkadang translate3D(0,0,0)tidak berhasil, kita dapat menggunakan metode berikut, menargetkan elemen yang tepat:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Ketika translate3d tidak berfungsi, coba tambahkan perspektif. Itu selalu berhasil untuk saya

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Menambahkan -webkit-transform: translate3d(0,0,0)ke elemen secara statis tidak berfungsi untuk saya.

Saya menerapkan properti ini secara dinamis. Misalnya, ketika halaman digulir, saya mengatur -webkit-transform: translate3d(0,0,0)elemen. Kemudian setelah penundaan singkat, saya mereset properti ini, yaitu, -webkit-transform: none Pendekatan ini sepertinya berhasil.

Terima kasih, @Colin Williams karena mengarahkan saya ke arah yang benar.

Saya memiliki masalah yang sama dengan iscroll 4.2.5 di ios7. Seluruh elemen gulir menghilang begitu saja. Saya sudah mencoba menambahkan translate3d(0,0,0)seperti yang disarankan di sini, ia telah memecahkan masalah, tetapi menonaktifkan efek "jepret" iscroll. Solusinya datang dengan memberikan "position:relative; z-index:1000;display:block"properti css ke seluruh wadah yang menampung elemen gulir dan tidak perlu memberikan translate3d ke elemen anak.

Pada saat translate3dmungkin tidak berfungsi, dalam kasus-kasus tersebut perspectivedapat digunakan

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
perspective: 1000;
-webkit-perspective: 1000;

Saya sangat yakin saya baru saja menyelesaikan ini dengan:

overflow-y: auto;

(Agaknya hanya overflow: auto;akan bekerja tergantung pada kebutuhan Anda.)

Ada kasus di mana rotasi diterapkan dan / atau indeks Z digunakan.

Rotasi : Deklarasi yang ada -webkit-transformuntuk memutar elemen mungkin tidak cukup untuk mengatasi masalah penampilan (seperti -webkit-transform: rotate(-45deg)). Dalam hal ini Anda dapat menggunakan -webkit-transform: translateZ(0px) rotateZ(-45deg)sebagai trik ( mind the rotate Z ).

Indeks Z : Bersama dengan rotasi, Anda dapat menentukan z-indexproperti positif , seperti z-index: 42. Langkah-langkah di atas yang dijelaskan di bawah "Rotasi" ada dalam kasus saya cukup untuk menyelesaikan masalah, bahkan dengan yang kosong translateZ(0px). Namun saya menduga bahwa indeks Z dalam kasus ini mungkin telah menyebabkan menghilang dan muncul kembali di tempat pertama. Dalam kasus apa pun z-index: 42properti perlu dijaga - -webkit-transform: translateZ(42px)hanya saja tidak cukup.

Ini adalah masalah yang sangat umum yang dihadapi oleh pengembang dan itu terutama disebabkan oleh Safari'ssifat elemen yang tidak diciptakan ulang position : fixed.

Jadi baik mengubah properti posisi atau beberapa peretasan perlu diterapkan seperti yang disebutkan dalam jawaban lain.

Tautan1

Link2

Dalam kasus saya (aplikasi iOS Phonegap), menerapkan translate3d ke elemen anak relatif tidak menyelesaikan masalah. Elemen yang dapat digulir tidak memiliki ketinggian yang diatur karena benar-benar diposisikan dan saya mendefinisikan posisi atas dan bawah. Apa yang diperbaiki untuk saya adalah menambahkan min-height (100px).

Saya memiliki masalah yang sama menggunakan Fancybox versi lama. Memutakhirkan ke v3 akan menyelesaikan masalah Anda ATAU Anda bisa menambahkan:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

Saya menghadapi masalah ini dalam proyek Framework7 & Cordova. Saya mencoba semua solusi di atas. Mereka tidak menyelesaikan masalah saya.

Dalam kasus saya, saya menggunakan animasi 10+ css pada halaman yang sama dengan rotasi tak terbatas (transform). Saya harus menghapus animasi. Tidak apa-apa sekarang dengan kurangnya beberapa fitur visual.

Jika solusi di atas tidak membantu Anda, Anda dapat mulai menghilangkan beberapa animasi.

yang -webkit-transform: translate3d(0, 0, 0);trik tidak bekerja untuk saya. Dalam kasus saya, saya telah menetapkan orangtua ke:

// parent
height: 100vh;

Mengubah itu menjadi:

height: auto;
min-height: 100vh;

Memecahkan masalah jika ada orang lain yang menghadapi situasi yang sama.

Dalam kasus saya, CSS tidak memperbaiki masalah. Saya perhatikan masalah saat menggunakan jQuery membuat ulang tombol.

$("#myButton").html("text")

Coba ini

$("#myButton").html("<span>text</span>")