Produced by Fourier

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

Sena Sena カレンダーアイコン 2022.09.16

概要

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

再現ページ

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

⚠️
iOSでないと事象が再現できないので、お手持ちのiPhone等でお試し下さい。
https://fourierlab.github.io/techblog-ios-safari-make-to-restore-scroll-position-when-back/

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

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

発生条件

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

viewport が未指定の場合

viewportinitial-scaleminimum-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のバージョンで修正される可能性がありそうです。

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

暫定対策

viewport にscaleを指定しましょう。

また注意深く当たっているスタイルを確認して、 <body> をはみ出していないか確認しましょう。

まとめ

スクロールが上に戻ってしまうという動作は、一見すると JavaScript 絡みの不具合かと思ってしまいますが、今回は違いました。 なかなか原因が見つかりませんでしたが、ページのUXにも大きく影響を与える部分なので、かなり調査をした結果発見することが出来ました。

同じ問題を抱えている方の力になればと思います。

Sena

Sena slash forward icon Engineer

生涯に亘り技術を極めていきたい。

関連記事