概要
弊社の案件で、iOSのSafariで特定のページに戻るとスクロールバーが一番上に戻ってしまう問題がありました。この不具合について、原因と対策内容を記事としてまとめました。
再現ページ
以下にテストページを用意しました。
下にスクロールしていくとリンクがあるので、遷移後にブラウザの戻るボタンで戻ってください。
すると、通常スクロール位置は保持されるはずですが、一番上に戻ってしまいます。
発生条件
調査したところ、スクロール位置が戻る事象の発生条件は、以下の通りでした。
・viewportが未指定の場合
・viewportにinitial-scaleかminimum-scaleが未指定かつ、<body>から1px以上はみ出したBoxが存在している場合
原因
原因としてはWebkitの不具合で、Bugzillaでバグが報告されていました。
修正自体は完了しているようなので、次期iOSのバージョンで修正される可能性がありそうです。
iOS 15: History back sometimes scrolls to top of the page · WebKit/WebKit@95d1502 · GitHub
Home of the WebKit project, the browser engine used by Safari, Mail, App Store and many other applications on macOS, iOS and Linux. - iOS 15: History back sometimes scrolls to top of the page · WebKit/WebKit@95d1502
https://github.com/WebKit/WebKit/commit/95d1502e5e90cecf932d5847e973b5e163999a3b
暫定対策
viewportにscaleを指定しましょう。
また注意深く当たっているスタイルを確認して、<body>をはみ出していないか確認しましょう。
まとめ
スクロールが上に戻ってしまうという動作は、一見するとJavaScript絡みの不具合かと思ってしまいますが、今回は違いました。 なかなか原因が見つかりませんでしたが、ページのUXにも大きく影響を与える部分なので、かなり調査をした結果発見することが出来ました。
同じ問題を抱えている方の力になればと思います。
新しいメンバーを募集しています
Sena ／ Engineer
生涯に亘り技術を極めていきたい。
