![今のところinput[type=”number”]を使わない方が良い理由と代替案 アイキャッチ](https://www.fourier.jp/storage/blog/post-outline/jLh85zUW8RaWiVlX9MATwpSprFDEYZw5.jpg)
概要
弊社の案件で、iOSの Safari で特定のページに戻るとスクロールバーが一番上に戻ってしまう問題がありました。この不具合について、原因と対策内容を記事としてまとめました。
再現ページ
以下にテストページを用意しました。
下にスクロールしていくとリンクがあると思いますので、遷移後にブラウザの戻るで戻ってください。

すると、通常スクロール位置は保持されるはずですが、一番上に戻ってしまいます。
発生条件
調査したところ、 スクロール位置が戻る
事象の発生条件は、以下の通りでした。
・ 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
原因
原因としては 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
暫定対策
viewport
にscaleを指定しましょう。
また注意深く当たっているスタイルを確認して、 <body>
をはみ出していないか確認しましょう。
まとめ
スクロールが上に戻ってしまうという動作は、一見すると JavaScript
絡みの不具合かと思ってしまいますが、今回は違いました。 なかなか原因が見つかりませんでしたが、ページのUXにも大きく影響を与える部分なので、かなり調査をした結果発見することが出来ました。
同じ問題を抱えている方の力になればと思います。