web-dev-qa-db-ja.com

iOS Safariが最初から完全なページをレンダリングしない

Safariモバイル（または狭い画面でのSafari Mac）で初めて開く場合を除いて、すべてのブラウザーとデバイスで適切にレンダリングされるWebサイトがあります。

ウェブサイト： http://sheriff.org/

iPhone Safariで再現：

  1. プライベートモードでウェブサイトを開く
  2. ページを更新

Mac用Safariで再現：

  1. Safariをプライベートモードで開く
  2. ユーザーエージェントをiOS-iPhoneに切り替えます（[開発]> [ユーザーエージェント]> [Safari-iOS-iPhone]）。
  3. おおよそのモバイルデバイスの幅に合わせてブラウザーのサイズを変更します
  4. ウェブサイトを開く
  5. ページを更新

予想：ページは1回目と2回目は同じように表示されます

sheriff.org after refresh

実際：プライベートモードで初めて、緑色のボックスのみが表示されます2回目は、ページが完全にレンダリングされます

sheriff.org in safari first time in private mode

調査結果：両方のページを比較して（正しくレンダリングされたときとレンダリングが壊れたとき）、違いがあるかどうかを確認し、どちらの場合も、ページのHTMLとCSSはまったく同じです。

最初の試行で表示されない要素（ページの更新後に正しくレンダリングされるはず）を検査すると、要素の表示に影響を与えるスタイル（opacity、display、visibility、position、など）は見つかりません。 ..等）

UPDATE：SafariコンソールにエラーがあるようですUnhandled Promise Rejection: [object DOMError]それがこの問題の原因である可能性があります。調査したところ、ページ上の動画の自動再生が原因である可能性があることがわかりました（ページには動画が含まれていますが、このエラーがスローされても動画は再生されます）。このエラーがスローされる別の理由があるはずだと思います

Safariでこのような動作が見られる理由についてのアドバイスは高く評価されます。

htmlioscssmacossafari
15
Anas Nakawa

あなたのウェブサイトは問題がはびこっていて、他のコメンテーターが指摘しているように、いくつかの問題は、ホームページのサイズが非常に大きいために、サイトアセットの一部を大きなものとしてロードしたいときにロードされないことが原因ですCSSの前に外部スクリプトがロードされています。問題のcssが「2回目」の試行で読み込まれる理由は、CSSがキャッシュされるためです...最終的に（要求する数十のJavaScriptの1つを読み込んだ後、要求する数十のcssファイルの1つをロードした後）。 ..そして後続のロードでCSSを適切に展開します（実際にページを初めてロードするのに十分な時間と帯域幅を許可する限り）。

私はあなたに多くのアドバイスを与えたいと思いますが、あなたの投稿との関連を保ちます：

  1. ページの先頭にあるJavaScriptの前に、CSSが呼び出されていることを確認してください。
  2. サイトが有用であるために不要なスクリプトの約90％を削除することを検討してください。Webサイトを閲覧する前に、特に比較的低速のモバイルブラウザーでは、これほど多くのデータをロードする忍耐力がほとんどないためです。
  3. Chromeのコンソールですべてのエラーを確認します（Googleでページを右クリックChromeをクリックし、[検査]をクリックして、[コンソール]を確認しますタブ...あなたのサイトには多くのエラーがあります。サイトを標準に準拠させ、検索エンジンでクロールされる可能性を高めるには、これらを修正する必要があります。
  4. Googleのインサイトページでサイトを確認してください： https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sheriff.org%2FPages%2FHome。 aspx

幸運を！

2
Doomd