概要
弊社の案件で、iOSの Safari で特定のページに戻るとスクロールバーが一番上に戻ってしまう問題がありました。この不具合について、原因と対策内容を記事としてまとめました。
再現ページ
以下にテストページを用意しました。
⚠️
iOSでないと事象が再現できないので、お手持ちのiPhone等でお試し下さい。
下にスクロールしていくとリンクがあると思いますので、遷移後にブラウザの戻るで戻ってください。
すると、通常スクロール位置は保持されるはずですが、一番上に戻ってしまいます。
発生条件
調査したところ、 スクロール位置が戻る 事象の発生条件は、以下の通りでした。
・ 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のバージョンで修正される可能性がありそうです。
https://github.com/WebKit/WebKit/commit/95d1502e5e90cecf932d5847e973b5e163999a3b
暫定対策
viewport にscaleを指定しましょう。
また注意深く当たっているスタイルを確認して、 <body> をはみ出していないか確認しましょう。
まとめ
スクロールが上に戻ってしまうという動作は、一見すると JavaScript 絡みの不具合かと思ってしまいますが、今回は違いました。 なかなか原因が見つかりませんでしたが、ページのUXにも大きく影響を与える部分なので、かなり調査をした結果発見することが出来ました。
同じ問題を抱えている方の力になればと思います。
