Vue: iOS Safari membuat halaman kosong

Meskipun saya tidak dapat mereproduksi, ini tampaknya merupakan masalah dengan cache back-forward Safari dan bukan Vue itu sendiri.

Haruskah kita menutup ini?
@cherry-geqi Lain kali pastikan untuk memberikan repro interaktif dan repro yang dapat diedit, seperti jsfiddle Ini sangat membantu, terlebih lagi dengan masalah seluler

Maaf, tetapi saya tidak dapat memberikan repro jsfiddle sehingga mungkin perlu beberapa langkah lagi untuk repro. Intinya adalah minimal lengkap. Untuk mengulangi, unduh intinya dan letakkan di bawah direktori root dari server sementara seperti python3 -m http.server dan kemudian minta dari iOS Safari.

Di perangkat saya, ini hampir 100% repo.

Berikut adalah screencastnya:
halaman-kosong-repro.zip

Mungkin ada masalah dengan Safari, tetapi kami harus memberikan solusi, bukan?

Saya pikir ini sebenarnya karena... Anda mengambil kembali data setiap kali Anda menavigasi ke rumah. Anda harus menggunakan toko untuk menyimpan data yang diambil.

Aku takut tidak. Mungkin saya tidak membuat diri saya jelas tetapi itu benar-benar masalah fatal yang hanya terjadi pada iOS Safari. Ketika saya menavigasi kembali, halaman tetap kosong sampai berinteraksi dengannya. Data dimuat dan DOM dibangun. Ini lebih seperti bug rendering browser tetapi adakah yang bisa kita lakukan?

Tidak dapat mereproduksi di iOS 10.3.1 menggunakan kode persis yang Anda berikan.

Ini adalah repro 100%. Gulir halaman daftar (penting!) dan arahkan ke halaman detail dan arahkan kembali. Saya telah mengerjakan ini setidaknya selama 20 jam.

Versi iOS Anda?

iOS 10.3.1 bersama dengan Wechat 6.5.7 karena beralih ke wkWebview sejak 6.5.6.

Anda seharusnya menyebutkan itu - Safari BUKAN WKWebView.

Repro di iOS Safari.

Ya. Ini adalah masalah yang 100% dapat direproduksi di ios（WeChat, Safari, setidaknya）untuk aplikasi saya juga. Vue 2.3.3.

@Centaur Sudahkah Anda menemukan solusi?

@cherry-geqi Saya menambahkan kode berikut setelah pengambilan data:

this.$nextTick(() => {
      window.scrollTo(0, 1)
      window.scrollTo(0, 0)
})

Setidaknya tim uji kami puas.

ya, apakah Anda menyelesaikan masalah ini? @cherry-geqi

@ppxialetsgo Solusi yang disediakan oleh @Centaur hanya berfungsi. Ini jelas bukan kasus individu. Saya sarankan tim vuejs lebih memperhatikan hal ini. @yyx990803 @posva

+1 Masalah yang sama persis.

100% direproduksi di iOS 9/10/11 + wechat(WKwebview)/safari. Tidak dapat mereproduksi di UIWebview dari wechat.

Solusi di atas bekerja untuk kami.

Kami sedang mempertimbangkan Vue untuk proyek baru kami tetapi utas ini tampaknya sangat mirip dengan apa yang saya lihat. Pengguna utama kami tidak akan memiliki ponsel terbaru dan saya melihat bahwa contoh aplikasi Vue tidak ditampilkan di IOS (7.1.2) Safari => IPHONE-4.

Reproduksi:
Demo vue di sini tidak ditampilkan di iOS 7.1.2
https://lucasleandro1204.github.io/vue-content-loading

Tetapi komponen React yang setara melakukan:
https://danilowoz.github.io/react-content-loader/

Mohon saran.

saya memiliki masalah yang sama

Saya memiliki masalah yang sama.

Saya memiliki masalah yang sama.

Ini sebenarnya masalah yang terkait dengan Safari alih-alih Vue, lihat demo ini yang tidak terkait dengan Vue.

Besar! Demo @javoski menunjukkan masalah ini tidak terkait dengan Vue tetapi Safari.

@Hao-Wu @javoski , saya tidak setuju dengan Anda dengan bagian Safari, saya mencoba dengan Google Chrome di Ipod touch saya dan itu juga membuat hal yang sama

@javoski . Dikatakan di inspektur web bahwa Anda memiliki kesalahan seperti yang ditunjukkan pada foto

Sepertinya "centang" tidak terbaca dengan benar

Hai teman-teman, saya memiliki masalah yang sama. tetapi sekarang saya memecahkan masalah saya.
saya menemukan bahwa masalah saya adalah karena struktur pohon dom

dalam kasus saya, ada dua elemen HTML bersarang.

Saya pikir itu karena ini membuat frame menjadi salah.

Saya tidak tahu apakah saya memiliki masalah yang persis sama, tetapi saya memiliki masalah yang terdengar cukup dekat dengan ini. Solusi bagi saya adalah menginstal babel-polyfill . Jadi, untuk masa depan orang Googling masalah ini mungkin bisa menjadi pilihan yang membantu.

Terima kasih atas solusi Anda @Centaur !!!
Anda menyelamatkan saya berjam-jam debugging ... Terima kasih bro.

masalah yang sama terjadi pada reaksi, jika elemen menggunakan '-webkit-overflow-scrolling: touch', itu tidak akan dirender saat kembali dalam kasus saya.

jadi, bagaimana menyelesaikan masalah akhirnya kecuali metode gulir? Saya juga mengalami masalah pada reaksi ...
@cherry-geqi @Centaur @posva

Walaupun masalah ini terpecahkan, saya tetap ingin mengatakan bahwa ini bukan masalah ios, tetapi masalah vue. Jika harus mengatakan itu adalah masalah ios, lalu jika ada masalah Android, apakah itu bukan masalah vue? Jadi siapa lagi yang akan menggunakan vue?
kamu lima

Masalah masih ada di Safari iOS 12.

Perbaikan @Centaur berhasil, Anda hanya perlu menemukan elemen gulir utama. Untuk kasus saya itu adalah div di dalam elemen tubuh.

Walaupun masalah ini terpecahkan, saya tetap ingin mengatakan bahwa ini bukan masalah ios, tetapi masalah vue. Jika harus mengatakan itu adalah masalah ios, lalu jika ada masalah Android, apakah itu bukan masalah vue? Siapa lagi yang akan menggunakan vue?
Anda berusia lima tahun

Apakah kamu sjb?

Dapat digunakan di vue

scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
   return {y: 0}
  }

# masalah saya adalah…

Vue di ios safari , Ketika slide kanan kembali ke home page , halaman akan kosong Kemudian tampilkan konten halaman sebelumnya， akhirnya muncul konten home page

Selain itu: Bukan hanya kembali ke home page yang memiliki masalah ini， fenomena ini juga ada di halaman lain ;

# bagaimana saya menyelesaikannya?

Abaikan Vue Transition emmm