Vue: يعرض iOS Safari صفحة فارغة

على الرغم من أنني لا أستطيع التكاثر ، فمن الواضح أن هذه مشكلة في ذاكرة التخزين المؤقت للأمام الخلفي في Safari وليست Vue نفسها.

هل يجب أن نغلق هذا إذن؟
@ cherry-geqi في المرة القادمة تأكد من توفير نسخة تفاعلية ونسخة قابلة للتحرير ، مثل jsfiddle 🙂 إنها تساعد حقًا ، حتى مع مشكلات الجوال

أنا آسف ولكن لا يمكنني تقديم jsfiddle repro لذا قد يستغرق الأمر بضع خطوات أخرى لإعادة برورو. الجوهر هو الحد الأدنى الكامل. للنسخ ، قم بتنزيل gist ثم ضعه ضمن الدليل الجذر لخادم مؤقت مثل python3 -m http.server ثم اطلب من iOS Safari.

في جهازي ، يكاد يكون 100٪ ريبو.

هنا لقطة شاشة:
فارغ- صفحة-repro.zip

قد تكون مشكلة في Safari ، لكن يجب علينا توفير حل بديل ، هل يجب علينا ذلك؟

أعتقد أن هذا في الواقع لأنك ... تعيد جلب البيانات في كل مرة تنتقل فيها إلى المنزل. يجب عليك استخدام متجر لتخزين البيانات التي تم جلبها مؤقتًا.

لا للأسف. ربما لم أوضح نفسي ، لكنها في الحقيقة مشكلة قاتلة لا تتكرر إلا على iOS Safari. عندما أعود إلى الوراء ، تظل الصفحة فارغة حتى أتفاعل معها. يتم تحميل البيانات وإنشاء DOM. إنه أشبه بخلل في عرض المتصفح ولكن هل هناك شيء يمكننا القيام به؟

لا يمكن إعادة الإنتاج على iOS 10.3.1 باستخدام الرمز الدقيق الذي قدمته.

إنها نسخة 100٪. قم بالتمرير في صفحة القائمة (مهم!) وانتقل إلى صفحة التفاصيل ثم انتقل مرة أخرى. لقد كنت أعمل على هذا لمدة 20 ساعة على الأقل.

إصدار iOS الخاص بك؟

iOS 10.3.1 مع Wechat 6.5.7 حيث تحول إلى WKWebview منذ 6.5.6.

يجب أن تكون قد ذكرت أن - Safari ليس WKWebView.

Repros على iOS Safari.

نعم فعلا. هذه مشكلة قابلة للتكرار بنسبة 100٪ على iOS （WeChat ، Safari ، على الأقل） لتطبيقي أيضًا. Vue 2.3.3.

Centaur هل وجدت طريقة عمل؟

@ cherry-geqi لقد أضفت الكود التالي بعد جلب البيانات:

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

على الأقل كان فريق الاختبار لدينا راضيًا.

نعم ، هل تحل هذه المشكلة؟ @ الكرز geqi

ppxialetsgo الحل البديل المقدم من Centaur يعمل فقط. من الواضح أن هذه ليست حالة فردية. أقترح أن يولي فريق vuejs مزيدًا من الاهتمام لهذا الأمر. تضمين التغريدة

+1 نفس المشكلة بالضبط.

تمت إعادة إنتاجه بنسبة 100٪ على نظام التشغيل iOS 9/10/11 + wechat (WKwebview) / Safari. لا يمكن التكاثر في UIWebview of wechat.

يعمل الحل أعلاه بالنسبة لنا.

نحن نفكر في Vue لمشروعنا الجديد ولكن هذا الموضوع يبدو مشابهًا جدًا لما أراه. لن يكون لدى مستخدمينا الأساسيين أحدث الهواتف وأرى أن نماذج تطبيقات Vue لا تظهر ببساطة على IOS (7.1.2) Safari => IPHONE-4.

التكاثر:
لا يتم عرض عرض vue هنا على IOS 7.1.2
https://lucasleandro1204.github.io/vue-content-loading

لكن مكون React المكافئ يقوم بما يلي:
https://danilowoz.github.io/react-content-loader/

يرجى تقديم النصيحة.

لدي نفس المشكلة

لدي نفس المشكلة.

لدي نفس المشكلة.

إنها في الواقع مشكلة متعلقة بـ Safari بدلاً من Vue ، تحقق من هذا العرض التوضيحي الذي لا يتضمن Vue.

رائعة! يشير العرض التوضيحي لـ javoski إلى أن المشكلة لا تتعلق بـ Vue بل بـ Safari.

@ Hao- Wujavoski ، أنا لا أتفق معك في جزء Safari ، لقد جربت Google Chrome في Ipod touch الخاص بي وهو يعرض نفسه أيضًا

تضمين التغريدة يقول في مفتش الويب أن لديك خطأ كما هو موضح في الصورة

يبدو أن "القراد" لا يُقرأ بشكل صحيح

مرحبًا يا رفاق ، لقد واجهت نفس المشكلة ، لكنني الآن حللت مشكلتي.
اكتشفت أن مشكلتي كانت بسبب بنية شجرة الدوم

في حالتي ، هناك عنصرا HTML متداخلين.

أعتقد أن هذا لأن هذا يجعل الإطار يخطئ.

لا أعرف ما إذا كان لدي نفس المشكلة بالضبط ، لكن لدي مشكلة تبدو قريبة جدًا من هذا. كان الحل بالنسبة لي هو تثبيت babel-polyfill . لذلك ، بالنسبة إلى الأشخاص المستقبليين على Google ، قد تكون هذه المشكلة خيارًا مفيدًا.

شكرا على الحل الخاص بك @ Centaur !!!
لقد وفرت لي ساعات من التصحيح ... شكرًا إخوانه.

تحدث نفس المشكلة عند التفاعل ، إذا كان العنصر يستخدم "-webkit-overflow-scrolling: touch" ، فلن يتم عرضه عند الإرجاع في حالتي.

إذن ، كيف تحل المشكلة أخيرًا باستثناء طريقة التمرير؟ أواجه أيضًا مشكلة في رد الفعل ...
تضمين التغريدة

على الرغم من حل هذه المشكلة ، ما زلت أريد أن أقول إن هذه ليست مشكلة iOS ، ولكنها مشكلة vue. إذا كان عليك أن تقول إنها مشكلة iOS ، إذا كانت هناك مشكلة في Android ، فهل هذه مشكلة vue؟ إذن من سيستخدم vue؟
انت في الخامسة

لا تزال المشكلة موجودة في Safari iOS 12.

نجح إصلاح

على الرغم من حل هذه المشكلة ، ما زلت أريد أن أقول إن هذه ليست مشكلة iOS ، ولكنها مشكلة vue. إذا كان عليك أن تقول إنها مشكلة iOS ، إذا كانت هناك مشكلة في Android ، فهل هذه مشكلة vue؟ من آخر سيستخدم vue؟
عمرك خمس سنوات

هل انت sjb؟

يمكن استخدامها في vue

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

# مشكلتي هي ...

Vue في ios safari ، عندما تعود الشريحة اليمنى إلى home page ، ستكون الصفحة فارغة ， ثم اعرض محتويات الصفحة السابقة ， أخيرًا يأتي محتوى home page ；

بالإضافة إلى ذلك: لا يعود الأمر إلى home page الذي يعاني من هذه المشكلة ， هذه الظاهرة موجودة أيضًا في صفحات أخرى ؛

# كيف استطعت حلها

التخلي عن Vue Transition emmm 太难 了