iPhoneでGoogleChromeアップデート後にWebサイトを閲覧していると、少し下へスクロールしただけなのに勝手に上へ戻ってしまいます。
しかも、戻った位置が中途半端で、固定ヘッダーの下にコンテンツが隠れてしまう。
さらに、別のタブへ切り替えてから戻ると正常な位置に戻る。
このような症状が2026年8月23日に幾つかのWebサイトで発生していました。
弊社（金風株式会社）のコーポレートサイトやブログページでも同じ現象が発生。
最初は「Webサイト側の実装に問題があるのではないか」と考え、原因を一つずつ検証しました。
その結果、今回の環境ではWebサイト側の実装を変更しても症状が改善せず、他社サイトでも同じ現象が発生することを確認しています。
この記事では、実際にどのように原因を切り分けたのかを紹介しています。
iPhoneのChromeでどんな症状が起きたのか
今回確認した症状は、次のようなものでした。
- ページを開いて少しスクロールすると、勝手に上へ戻る
- 戻った位置が中途半端になる
- 見出しや本文の一部が固定ヘッダーの下に隠れる
- 指で上へスワイプしても、それ以上戻らない
- 別のタブに切り替えてから戻ると正常な位置に戻る
- Safariでは発生せず、Chromeで発生する
当社の環境では、ブラウザのキャッシュを削除した直後にサイトを開くと、症状を確認しやすい状態でした。
最初はWebサイト側の問題を疑った
Webサイトを制作・運用している立場として、最初に疑ったのは自分たちの実装です。
スクロールに関係しそうな処理を一つずつ確認し、原因になりそうなものを外して再検証しました。
今回は、次の4つを順番に確認しています。
- スムーズスクロールのライブラリ
- CSSのスクロール設定
- 固定ヘッダー
- JavaScript
検証1：スムーズスクロールのライブラリを外す
当社のサイトでは、スクロールを滑らかにするためのライブラリ「Lenis」を使用していました。
このようなライブラリは、ブラウザ標準のスクロールとは異なる方法でスクロール位置を管理する場合があります。
そのため、まずスマートフォンでの動作を完全に無効にして検証しました。
結果：症状は改善しませんでした。
つまり、少なくとも今回の症状はLenisを無効にするだけでは解消できませんでした。
このライブラリは目次のページ内リンクとも競合しやすく、見出し構造とSEO・AEOの考え方｜Drupalで目次を自動生成するでも対応の経緯を書いています。
検証2：CSSのscroll-behaviorを外す
次に確認したのが、CSSのスクロール設定です。
サイトには、ページ内リンクなどを滑らかに移動させるため、次の指定を使用していました。
html { scroll-behavior: smooth; }
iOSではブラウザの表示領域が変化することがあるため、スクロール処理との組み合わせに問題がないか確認しました。
そこで、スマートフォンではこの指定が適用されないように変更して再検証しました。
結果：症状は改善しませんでした。
検証3：固定ヘッダーを外す
次に疑ったのが、画面上部に固定しているヘッダーです。
iPhoneでは、スクロールに応じてブラウザのアドレスバーなどの表示領域が変化します。そのため、固定要素の位置や表示領域との組み合わせに問題がある可能性も考えました。
そこで検証用ページを作成し、固定ヘッダーを完全に解除した状態で確認しました。
結果：それでも症状は発生しました。
この時点で、固定ヘッダーが直接の原因である可能性も低くなりました。
検証4：JavaScriptを完全に外す
それでも原因が分からなかったため、最後にJavaScriptそのものを疑いました。
検証用のページからJavaScriptを完全に取り除き、スクリプトが動作していない状態で確認しました。
結果：それでも同じ症状が発生しました。
ここまでの検証で、
- スクロールライブラリ
- CSSのスクロール設定
- 固定ヘッダー
- JavaScript
を順番に切り分けました。
それでも症状が再現するため、次は「自社サイトだけで発生しているのか」を確認する必要があります。
他社のWebサイトでも同じ症状が発生した
原因を切り分けるうえで重要なのが、別の環境で再現するかどうかです。
そこで、当社とはまったく関係のないWebサイトをiPhoneのChromeで開き、同じようにスクロールして確認しました。
すると、他社サイトでも同じような症状が発生しました。
さらにSafariでは同じ現象が確認されませんでした。
ここまで確認したことで、少なくとも今回の環境では、当社サイト固有の実装が原因である可能性はかなり低いと判断しました。
今回の検証から分かったこと
今回の検証結果を整理すると、次のようになります。
| 検証した項目 | 結果 |
|---|---|
| スクロールライブラリ | 無効化しても改善しない |
| CSSのscroll-behavior | 変更しても改善しない |
| 固定ヘッダー | 解除しても改善しない |
| JavaScript | 完全に削除しても再現する |
| 他社サイト | 同様の症状を確認 |
| Safari | 同じ症状は確認されない |
この結果から、今回確認した現象はWebサイト側の実装ではなく、iPhoneのChrome側の挙動による可能性が高いと判断しました。
同じ症状が出たときに試したいこと
ブラウザ側の問題が疑われる場合、Webサイトをいきなり修正するのではなく、まず原因を切り分けることが重要です。
9-1. Safariで同じページを確認する
Safariでは問題が発生しないのであれば、ブラウザ固有の問題である可能性を考えられます。
9-2. 別のWebサイトでも確認する
自社サイトだけでなく、複数のWebサイトで同じ症状が発生するか確認します。
複数のサイトで同じ現象が発生するのであれば、自社サイトのコードだけを疑い続ける必要はありません。
9-3. JavaScriptを無効にして確認する
JavaScriptによるスクロール制御やDOM操作が原因かどうかを切り分ける方法の一つです。
9-4. ブラウザのアップデート状況を確認する
特定のブラウザバージョンで発生している場合、ブラウザ側の修正によって解消される可能性があります。
Webサイトを運営する側はどうすればいいのか？
今回のように原因がブラウザ側にあると考えられる場合、サイト運営者が慌ててコードを書き換える必要はありません。
むしろ、原因が分からない状態で回避処理を追加すると、別のブラウザや将来のアップデートで新たな問題を引き起こす可能性があります。
まずは、
- どのブラウザで発生するのか
- どのOS・端末で発生するのか
- 他のWebサイトでも発生するのか
- JavaScriptを無効にしても発生するのか
- 特定のブラウザバージョンに依存していないか
といった情報を整理することが大切です。
切り分けで原因にたどり着いた別の例は、ブログ26本がGoogle検索に出ない｜サイトマップのURLが壊れていた実例と原因・対処法にあります。
今回の経験から学んだこと
11-1. 推測で修正するより、原因を一つずつ切り分ける
Webサイトに不具合が発生すると、「このコードが悪いのではないか」と考えてすぐ修正したくなります。
しかし、原因が分からないまま修正を繰り返すと、何が原因だったのか分からなくなります。
今回は、ライブラリ、CSS、固定ヘッダー、JavaScriptの順番に検証し、原因になりそうなものを一つずつ除外しました。
推測して修正するのではなく、検証して原因を絞り込む。
Web制作では、この考え方が非常に重要だと改めて感じました。
影響範囲を見極めて段階的に直すという判断は、静的サイトとCMSを併用すると起きる「共通パーツのズレ」｜二重管理をやめる方法でも書いています。
11-2. 自社サイトだけでなく、他のサイトでも再現するか確認する
今回の切り分けで特に重要だったのが、他社サイトでも確認したことです。
自社サイトだけを見ていたら、「自分たちのコードに原因がある」と考え続けていたかもしれません。
「このサイトだけの問題なのか、それともブラウザ全体の問題なのか」
この視点を持つだけでも、原因調査の時間を大きく短縮できます。
11-3. 「直さない」という判断も技術者の仕事
不具合を見つけたら、必ずコードを修正しなければならないとは限りません。
原因がブラウザ側にあり、サイト側で無理に回避しようとすると別の問題を生む可能性があるのであれば、修正せずに経過を見るという選択肢もあります。
重要なのは「何もしない」ことではありません。
原因を調査したうえで、今は修正しないと判断することです。
まとめ
今回、iPhoneのChromeで発生したスクロール位置の異常について、Webサイト側の実装を一つずつ切り分けました。
- スクロールライブラリを無効化しても改善しない
- CSSのスクロール設定を変更しても改善しない
- 固定ヘッダーを解除しても改善しない
- JavaScriptを完全に外しても再現する
- 他社サイトでも同様の症状を確認した
- Safariでは同じ症状が確認されなかった
これらの検証結果から、今回の環境ではWebサイト側ではなく、iPhoneのChrome側の挙動による可能性が高いと判断しました。
Webサイトに不具合が発生したとき、最初から自分のコードを疑うことは悪いことではありません。しかし、それだけでは原因を見誤ることがあります。
- 自分のサイトだけなのか？
- 別のサイトでも起きるのか？
- 別のブラウザではどうなのか？
この3つを確認するだけでも、原因の切り分けはかなり進みます。
「あれ？Webサイトの表示がおかしいけれど、どこに原因があるのか分からない」という場合は、ぜひ金風株式会社にご相談ください。実際のWebサイト運用経験をもとに、原因の切り分けから改善方法の検討までサポートします。