iOSのSafariで特定のページに戻るとスクロール位置がリセットされる現象･･･実はWebKitのバグ！？

Sena カレンダーアイコン 2022.09.16

概要

弊社の案件で、iOSの Safari で特定のページに戻るとスクロールバーが一番上に戻ってしまう問題がありました。この不具合について、原因と対策内容を記事としてまとめました。

再現ページ

以下にテストページを用意しました。

⚠️

iOSでないと事象が再現できないので、お手持ちのiPhone等でお試し下さい。

https://fourierlab.github.io/techblog-ios-safari-make-to-restore-scroll-position-when-back/

下にスクロールしていくとリンクがあると思いますので、遷移後にブラウザの戻るで戻ってください。

すると、通常スクロール位置は保持されるはずですが、一番上に戻ってしまいます。

発生条件

調査したところ、 スクロール位置が戻る 事象の発生条件は、以下の通りでした。

・ viewport が未指定の場合

・ viewport に initial-scale か minimum-scale が未指定かつ、 <body> から1px以上はみ出したBoxが存在している場合

graph TD
  A[Start] --> B{viewportが未指定}
  B --"はい"--> o1[起きる]
  B --"いいえ"--> C{viewportにinitial-scaleかminimum-scaleが未指定}
  C --"はい"--> D{bodyを1px以上はみ出したBoxが存在する}
  C --"いいえ"--> o2[起きない]
  D --"はい"--> o1
  D --"いいえ"--> o2

💡

再現ページでは「bodyを1pxはみ出しているBoxが存在する」ため起きています。

原因

原因としては Webkit の不具合で、 Bugzilla でバグが報告されていました。

修正自体は完了しているようなので、次期iOSのバージョンで修正される可能性がありそうです。

iOS 15: History back sometimes scrolls to top of the page · WebKit/WebKit@95d1502

https://bugs.webkit.org/show_bug.cgi?id=231563 <rdar://problem/84405417> Reviewed by Devin Rousso. Sometimes, going back in history would fail to restore the scroll position because in -[WK...

https://github.com/WebKit/WebKit/commit/95d1502e5e90cecf932d5847e973b5e163999a3b