Tech blog Produced by FOURIER

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

Sena Sena 2022.09.16

概要

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

再現ページ

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

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

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

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

発生条件

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

viewportが未指定の場合

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

暫定対策

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

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

まとめ

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

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

Sena

Sena / Engineer

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