tmegos blog

Web developer

iOS/iPadOS 13のSafariでページ全体や一部がレンダリングされない問題に対するワークアラウンド

背景

業務でWebアプリを開発しているのですが、iPadOS 13のSafariにて以下のような事象が発生しました

  • ページ全体が真っ白になる
  • ページの一部が欠ける
  • 真っ白になったり、一部が欠けたりしたときにWebインスペクタを使うとDOM自体は存在している
  • 画面をタップ、スクロールするとレンダリングされる

iOS 13 Safari Not Rendering などで調べてみるといくつかスレッドが上がっていました
しかし、問題解決までには至っていないようでした

Safari on iOS 13.1.2 Not Rendering Correc… - Apple Community

https://discussions.apple.com/thread/250673539

Webアプリを使う人にとっては単純に「Webアプリが使えない」と思ってしまうので、あまりやりたくないですがワークアラウンドを考えてみました

対策

初期表示にスクロールさせてレンダリングされるようにしました

画面をタップ、スクロールするとレンダリングされる

という事象から、アプリ側で強制的にスクロールさせました
Safari側で対応してくれればいいのですが…

擬似コード

レンダリングが終わった = function () {
  // y軸方向に1pxずらす
  setTimeout(function () {
    window.scrollTo(0, 1);
  }, 100);
  // 1pxずらしたので戻す
  setTimeout(function () {
    window.scrollTo(0, 0);
  }, 200);
}