Vue: iOSSafariは空白のページをレンダリングします

再現できませんが、これはSafariのバックフォワードキャッシュの問題であり、Vue自体の問題ではないようです。

では、これを閉じる必要がありますか？
@ cherry-geqi次回は、jsfiddleのように、インタラクティブな再現と編集可能な再現を提供するようにしてください🙂これは、モバイルの問題でさらに役立ちます

申し訳ありませんが、jsfiddleの再現を提供できないため、再現するためにさらにいくつかの手順が必要になる場合があります。 要旨は最低限の完全なものです。 再現するには、要点をダウンロードして、 python3 -m http.serverなどの一時サーバーのルートディレクトリに置き、iOSSafariからリクエストします。

私のデバイスでは、ほぼ100％のレポです。

スクリーンキャストは次のとおりです。
blank-page-repro.zip

Safariで問題になる可能性がありますが、回避策を提供する必要がありますか？

これは実際には...家に移動するたびにデータを再フェッチしているためだと思います。 フェッチされたデータをキャッシュするには、ストアを使用する必要があります。

そうではないと思います。 たぶん私は自分自身を明確にしませんでしたが、それは本当に致命的な問題であり、iOSSafariでのみ再現されます。 戻ると、ページを操作するまでページは空白のままになります。 データがロードされ、DOMが構築されます。 ブラウザのレンダリングのバグに似ていますが、何かできることはありますか？

指定した正確なコードを使用してiOS10.3.1で再現することはできません。

100％再現です。 リストページをスクロールして（重要！）、詳細ページに移動して戻ります。 私は少なくとも20時間これに取り組んできました。

あなたのiOSバージョン？

6.5.6以降WKWebviewに切り替えたiOS10.3.1とWechat6.5.7。

あなたはそれを言及するべきでした-SafariはWKWebViewではありません。

iOSSafariでの再現。

はい。 これは、私のアプリでもios（少なくともWeChat、Safari）で100％再現可能な問題です。 Vue2.3.3。

@Centaurあなたはworkaroudを見つけましたか？

@ cherry-geqiデータフェッチ後に次のコードを追加しました。

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

少なくとも私たちのテストチームは満足していました。

ええ、あなたはこの問題を解決しますか？ @ cherry-geqi

@ ppxialetsgo @ Centaurによって提供される回避策は正しく機能します。 これは明らかに個別のケースではありません。 vuejsチームがこれにもっと注意を払うことをお勧めします。 @ yyx990803 @posva

+1まったく同じ問題。

iOS 9/10/11 + wechat（WKwebview）/ safariで100％再現。 wechatのUIWebviewでは再現できません。

上記の回避策は私たちのために働きます。

新しいプロジェクトでVueを検討していますが、このスレッドは私が見ているものと非常に似ているようです。 私たちのプライマリユーザーは最新の電話を持っていないでしょう、そして私はサンプルのVueアプリが単にIOS（7.1.2）Safari => IPHONE-4でレンダリングされないのを見ます。

再生：
ここのvueデモはIOS7.1.2ではレンダリングされません
https://lucasleandro1204.github.io/vue-content-loading

しかし、同等のReactコンポーネントは次のことを行います。
https://danilowoz.github.io/react-content-loader/

お知らせ下さい。

私は同じ問題を抱えています

私は同じ問題を抱えています。

私は同じ問題を抱えています。

これは実際にはVueではなくSafariに関連する問題です。Vueに関係のないこのデモをチェックしてください。

素晴らしい！ @javoskiのデモは、問題がVueではなくSafariに関連していることを示しています。

@ Hao-Wu @ javoski 、Safariの部分については同意しません

@javoski 。 写真のようにエラーがあるとウェブインスペクターに表示されます

「ダニ」が正しく読まれていないようです

やあみんな、私は同じ問題を抱えていました。しかし今、私は私の問題を解決しました。
私の問題はDOMツリーの構造に起因していることがわかりました

私の場合、ネストされたHTML要素が2つあります。

これはフレームのレンダリングが間違っているためだと思います。

まったく同じ問題が発生したかどうかはわかりませんが、これにかなり近い問題が発生しました。 私にとっての解決策は、 babel-polyfillをインストールすること

回避策@Centaurをありがとう!!!
あなたは私にデバッグの時間を節約しました...仲間に感謝します。

同じ問題がreactでも発生します。要素が「-webkit-overflow-scrolling：touch」を使用している場合、私の場合は戻り時にレンダリングされません。

だから、スクロール方法を除いて最終的に問題を解決する方法は？ 私も反応の問題に遭遇します...
@ cherry-geqi @Centaur @posva

この問題は解決しましたが、これはiosの問題ではなく、vueの問題であると言いたいのですが、iosの問題であると言わなければならない場合、Androidの問題がある場合、vueの問題ではありませんか？では、他に誰がvueを使用するのでしょうか？
あなたは5歳です

この問題はSafariiOS12でも引き続き発生します。

@Centaurの修正は機能しました。メインのスクロール要素を見つける必要があります。 私の場合、それはボディ要素内のdivでした。

この問題は解決しましたが、これはiosの問題ではなく、vueの問題であると言いたいのですが、iosの問題であると言わなければならない場合、Androidの問題がある場合、vueの問題ではありませんか？他に誰がvueを使用しますか？
あなたは5歳です

あなたはsjbですか？

vueで使用できます

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

＃私の問題は…

Vue in ios safari、右にスライドしてhome pageに戻ると、ページが空白になり、前のページのコンテンツが表示され、最後にhome pageのコンテンツが表示されます。

さらに、この問題が発生しているのはhome page戻るだけでなく、この現象は他のページにも存在します。

＃どうやって解決したの？

Vue Transitionを放棄し、emmm太难了