Vue: iOS Safari rendert leere Seite

Auch wenn ich es nicht reproduzieren kann, ist dies anscheinend ein Problem mit dem Rückwärts-Cache von Safari und nicht mit Vue selbst.

Sollen wir das dann schließen?
@cherry-geqi Stellen Sie beim nächsten Mal sicher, dass Sie ein interaktives Repro und ein bearbeitbares Repro bereitstellen, wie eine jsfiddle 🙂 Es hilft wirklich, noch mehr bei mobilen Problemen

Es tut mir leid, aber ich kann keine Jsfiddle-Repro bereitstellen, daher kann es einige weitere Schritte dauern, bis die Repro erstellt wird. Der Kern ist ein Minimum vollständig. Laden Sie zum Repro das Wesentliche herunter und legen Sie es unter das Stammverzeichnis eines temporären Servers wie python3 -m http.server und fordern Sie dann von iOS Safari an.

In meinem Gerät ist es fast ein 100% Repo.

Hier ist ein Screencast:
blank-page-repro.zip

Es kann ein Problem mit Safari sein, aber wir sollten eine Problemumgehung bereitstellen, oder?

Ich denke, das liegt tatsächlich daran, dass Sie die Daten jedes Mal neu abrufen, wenn Sie nach Hause navigieren. Sie sollten einen Speicher verwenden, um die abgerufenen Daten zwischenzuspeichern.

Ich fürchte nein. Vielleicht habe ich mich nicht klar ausgedrückt, aber es ist wirklich ein fatales Problem, das nur auf iOS Safari reproduziert wird. Wenn ich zurück navigiere, bleibt die Seite leer, bis ich damit interagiere. Die Daten werden geladen und das DOM wird aufgebaut. Es ist eher ein Browser-Rendering-Fehler, aber können wir etwas tun?

Kann unter iOS 10.3.1 nicht mit dem genauen von Ihnen bereitgestellten Code reproduziert werden.

Es ist eine 100% Reproduktion. Scrollen Sie auf der Listenseite (wichtig!) und navigieren Sie zur Detailseite und navigieren Sie zurück. Ich habe mindestens 20 Stunden daran gearbeitet.

Ihre iOS-Version?

iOS 10.3.1 zusammen mit Wechat 6.5.7, da es seit 6.5.6 auf WKWebview umgestellt wurde.

Sie hätten das erwähnen sollen - Safari ist NICHT WKWebView.

Reproduktionen auf iOS Safari.

Jawohl. Dies ist ein Problem, das auf ios, zumindest WeChat, Safari, auch für meine App zu 100% reproduzierbar ist. Vue 2.3.3.

@Centaur Haben Sie eine

@cherry-geqi Ich habe nach dem Datenabruf folgenden Code hinzugefügt:

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

Zumindest unser Testteam war zufrieden.

Ja, lösen Sie dieses Problem? @kirsche-geqi

@ppxialetsgo Die von @Centaur bereitgestellte @yyx990803 @posva

+1 Genau das gleiche Problem.

100% reproduziert auf iOS 9/10/11 + Wechat(WKwebview)/Safari. Kann in UIWebview von Wechat nicht reproduziert werden.

Die obige Problemumgehung funktioniert für uns.

Wir ziehen Vue für unser neues Projekt in Betracht, aber dieser Thread scheint dem sehr ähnlich zu sein, was ich sehe. Unsere Hauptbenutzer werden nicht die neuesten Telefone haben und ich sehe, dass Vue-Beispielanwendungen auf IOS (7.1.2) Safari => IPHONE-4 einfach nicht gerendert werden.

Reproduktion:
Die Vue-Demo hier rendert nicht unter IOS 7.1.2
https://lucasleandro1204.github.io/vue-content-loading

Aber die äquivalente React-Komponente tut es:
https://danilowoz.github.io/react-content-loader/

Bitte beraten.

Ich habe das gleiche Problem

Ich habe das gleiche Problem.

Ich habe das gleiche Problem.

Es ist tatsächlich ein Problem im Zusammenhang mit Safari anstelle von Vue. Schauen Sie sich diese Demo an, die nicht mit Vue zu tun hat.

Groß! Die Demo von @javoski zeigt an, dass das Problem nicht mit Vue, sondern mit Safari zusammenhängt.

@Hao-Wu @javoski , ich stimme dir mit dem Safari-Teil nicht zu, ich habe es mit Google Chrome in meinem Ipod touch versucht und es rendert auch dasselbe

@javoski . Im Webinspektor steht, dass Sie einen Fehler haben, wie auf dem Foto gezeigt

Anscheinend wird das "Häkchen" nicht richtig gelesen

Hey Leute, ich hatte das gleiche Problem, aber jetzt habe ich mein Problem gelöst.
Ich fand heraus, dass mein Problem an der Struktur des Dombaums lag

in meinem Fall gibt es zwei verschachtelte HTML-Elemente.

Ich denke, es liegt daran, dass dadurch das Frame-Rendering falsch gemacht wird.

Ich weiß nicht, ob ich genau das gleiche Problem hatte, aber ich hatte ein Problem, das ziemlich ähnlich klingt. Die Lösung für mich war, babel-polyfill zu installieren. Also, für zukünftige Leute, die dieses Problem googeln, könnte dies eine Option sein, die hilft.

Danke für deine Problemumgehung @Centaur !!!
Du hast mir stundenlanges Debuggen erspart... Danke, Bruder.

Das gleiche Problem tritt beim Reagieren auf, wenn das Element '-webkit-overflow-scrolling: touch' verwendet, wird es in meinem Fall bei der Rückkehr nicht gerendert.

Also, wie kann man das Problem endlich lösen, außer der Scroll-Methode? Ich stoße auch auf das Problem beim Reagieren...
@cherry-geqi @Centaur @posva

Obwohl dieses Problem gelöst ist, möchte ich dennoch sagen, dass dies kein iOS-Problem ist, sondern ein Vue-Problem. Wenn Sie sagen müssen, dass es ein iOS-Problem ist, ist es dann kein Vue-Problem, wenn es ein Android-Problem gibt? Wer sonst wird vue verwenden?
du bist fünf

Das Problem besteht weiterhin auf Safari iOS 12.

@Centaur Fix hat funktioniert, Sie müssen nur das Haupt-Scrolling-Element finden. In meinem Fall war es ein div-inneres Körperelement.

Obwohl dieses Problem gelöst ist, möchte ich dennoch sagen, dass dies kein iOS-Problem ist, sondern ein Vue-Problem. Wenn Sie sagen müssen, dass es ein iOS-Problem ist, ist es dann kein Vue-Problem, wenn es ein Android-Problem gibt? Wer wird noch vue verwenden?
Du bist fünf Jahre alt

Bist du sjb?

Kann im Vue verwendet werden

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

# mein Problem ist…

Vue in ios Safari , Wenn der rechte Schieber zurück zu home page , ist die Seite leer ， Dann zeigen Sie den Inhalt der vorherigen Seite， schließlich kommt der Inhalt der home page ；

Außerdem: Dieses Problem hat nicht nur home page ， dieses Phänomen gibt es auch auf anderen Seiten;

# wie habe ich es gelöst

Gib die Vue Transition ， emmm 太难了