Vue: iOS Safari affiche une page blanche

Même si je ne peux pas reproduire, il s'agit apparemment d'un problème avec le cache arrière de Safari et non avec Vue lui-même.

Doit-on fermer ça alors ?
@cherry-geqi La prochaine fois, assurez-vous de fournir une reproduction interactive et une reproduction modifiable, comme un jsfiddle 🙂 Cela aide vraiment, encore plus avec les problèmes mobiles

Je suis désolé, mais je ne peux pas fournir de repro jsfiddle, cela peut donc prendre quelques étapes supplémentaires pour reproduire. L'essentiel est un minimum complet. Pour reproduire, téléchargez l'essentiel, puis placez-le dans le répertoire racine d'un serveur temporaire comme python3 -m http.server , puis demandez à iOS Safari.

Dans mon appareil, c'est presque un repo à 100%.

Voici un screencast :
page-blanche-repro.zip

Cela peut être un problème avec Safari, mais nous devrions fournir une solution de contournement, n'est-ce pas ?

Je pense que c'est en fait parce que... vous récupérez les données chaque fois que vous accédez à la maison. Vous devez utiliser un magasin pour mettre en cache les données récupérées.

J'ai bien peur que non. Peut-être que je n'ai pas été clair mais c'est vraiment un problème fatal qui ne se reproduise que sur iOS Safari. Lorsque je reviens en arrière, la page reste vierge jusqu'à ce que j'interagisse avec elle. Les données sont chargées et le DOM est construit. Cela ressemble plus à un bug de rendu du navigateur, mais y a-t-il quelque chose que nous puissions faire ?

Impossible de reproduire sur iOS 10.3.1 en utilisant le code exact que vous avez fourni.

C'est une reproduction à 100%. Faites défiler la page de liste (important !) et accédez à la page de détail et revenez en arrière. J'y travaille depuis au moins 20 heures.

Votre version iOS ?

iOS 10.3.1 avec Wechat 6.5.7 car il est passé à WKWebview depuis la 6.5.6.

Vous auriez dû mentionner que - Safari n'est PAS WKWebView.

Repros sur iOS Safari.

Oui. C'est un problème qui est 100% reproductible sur ios (WeChat, Safari, au moins) pour mon application également. Vue 2.3.3.

@Centaur Avez-vous trouvé une solution de contournement ?

@cherry-geqi J'ai ajouté le code suivant après la récupération des données :

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

Au moins, notre équipe de test était satisfaite.

oui, résolvez-vous ce problème ? @cerise-geqi

@ppxialetsgo La solution de contournement fournie par @Centaur fonctionne. Ce n'est évidemment pas un cas individuel. Je suggère à l'équipe de vuejs d'accorder plus d'attention à cela. @yyx990803 @posva

+1 Exactement le même problème.

100% reproduit sur iOS 9/10/11 + wechat(WKwebview)/safari. Impossible de reproduire dans UIWebview de wechat.

La solution de contournement ci-dessus fonctionne pour nous.

Nous envisageons Vue pour notre nouveau projet mais ce fil semble très similaire à ce que je vois. Nos principaux utilisateurs n'auront pas les derniers téléphones et je vois que les exemples d'applications Vue ne s'affichent tout simplement pas sur IOS (7.1.2) Safari => IPHONE-4.

La reproduction:
La démo vue ici ne s'affiche pas sur IOS 7.1.2
https://lucasleandro1204.github.io/vue-content-loading

Mais le composant React équivalent fait :
https://danilowoz.github.io/react-content-loader/

S'il vous plaît donnez votre avis.

J'ai le même problème

J'ai le même problème.

J'ai le même problème.

C'est en fait un problème lié à Safari au lieu de Vue, consultez cette démo qui n'implique pas Vue.

Super! La démo de @javoski indique que le problème n'est pas lié à Vue mais à Safari.

@Hao-Wu @javoski , je ne suis pas d'accord avec toi avec la partie Safari, j'ai essayé avec Google Chrome dans mon Ipod touch et ça rend aussi la même chose

@javoski . Il est indiqué dans l'inspecteur Web que vous avez une erreur comme indiqué sur la photo

On dirait que le "tick" n'est pas lu correctement

Salut les gars, j'ai eu le même problème, mais maintenant j'ai résolu mon problème.
j'ai découvert que mon problème était dû à la structure de l'arbre dom

dans mon cas, il y a deux éléments HTML imbriqués.

Je pense que c'est parce que cela rend le rendu incorrect du cadre.

Je ne sais pas si j'ai eu exactement le même problème, mais j'ai eu un problème qui semble assez proche de celui-ci. La solution pour moi était d'installer babel-polyfill . Donc, pour les futurs utilisateurs de Google, ce problème pourrait être une option utile.

Merci pour votre solution de contournement @Centaur !!!
Tu m'as épargné des heures de débogage... Merci mon frère.

le même problème se produit lors de la réaction, si l'élément utilise '-webkit-overflow-scrolling: touch', il ne sera pas rendu au retour dans mon cas.

alors, comment résoudre le problème finalement sauf la méthode de défilement? Je rencontre aussi le problème de réagir...
@cherry-geqi @Centaure @posva

Bien que ce problème soit résolu, je tiens quand même à dire qu'il ne s'agit pas d'un problème ios, mais d'un problème de vue. Si vous devez dire que c'est un problème d'ios, alors s'il y a un problème Android, n'est-ce pas un problème de vue ? Alors, qui d'autre utilisera vue ?
tu as cinq ans

Le problème existe toujours sur Safari iOS 12.

Le correctif

Bien que ce problème soit résolu, je tiens quand même à dire qu'il ne s'agit pas d'un problème ios, mais d'un problème de vue. Si vous devez dire que c'est un problème d'ios, alors s'il y a un problème Android, n'est-ce pas un problème de vue ? Qui d'autre utilisera vue ?
Tu as cinq ans

Êtes-vous sjb?

Peut être utilisé en vue

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

# mon problème est…

Vue dans ios safari , Lorsque la droite glisse vers le home page , la page sera vierge ， Ensuite, affichez le contenu de la page précédente， vient enfin le contenu du home page ；

De plus : Il n'y a pas que les home page qui ont ce problème， ce phénomène existe aussi sur d'autres pages ;

# comment l'ai-je résolu

Abandonnez les Vue Transition ， emmm 太难了