[ 対応検討中 ] iPhone 17 の Chrome（横向き表示）でページ全体が左にずれる現象について
[ 対応検討中 ] iPhone 17 の Chrome（横向き表示）でページ全体が左にずれる現象について
- このトピックには12件の返信、3人の参加者があり、最後に
により2週、 5日前に更新されました。
-
投稿
-
■ WordPress のバージョン
7.0.2■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
Lightning ( G3 )■ テーマのバージョン
15.37.1■ スキンの種類
Origin III■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
Chromeでのズレの解消■ 自分で試した事
【確認結果】
Safari：正常
Googleアプリ内ブラウザ：正常
Google Chrome：横向き表示時のみ現象が発生また、自身が制作した複数のLightningサイトで同様の現象を確認しております。
さらに、Lightning公式サイト（https://vektor-inc.co.jp/）でも同じ環境で確認したところ、ページ全体が左へずれ、左側が見切れる同様の現象を確認いたしました。
念のため、以下も確認しております。
Chromeのキャッシュ削除：改善なし
Safariでは正常に表示
Googleアプリ内ブラウザでは正常に表示
Lightning公式サイトでも同様の現象を確認以上のことから、自サイト固有の問題ではなく、特定の環境で発生する現象ではないかと考えております。
同様のご報告や既知の事象がございましたら、ご教示いただけますと幸いです。
お忙しいところ恐れ入りますが、ご確認のほどよろしくお願いいたします。
■ 症状が発生するブラウザ
Google Chrome：150.7871.113■ 実際の症状
お世話になっております。
Lightningを利用してホームページを制作しております。現在、iPhone 17のChromeでのみ発生する表示について、ご確認いただきたくご連絡いたしました。
【現象】
iPhone 17でGoogle Chromeを使用し、端末を横向きにすると、ページ全体が左方向へずれ、右側の表示が見切れる現象が発生します。ヘッダーからフッターまでサイト全体が左へオフセットされたような状態となり、正常に中央揃えで表示されません。
ご教示の件、私の手元のiPhoneのChromeでも念のため確認しましたが、添付のとおりとなり、再現されずでした。
条件の切り分けをさせていただきたく、他のページでも同じ現象は起こりますでしょうか？
（たとえば、X-T9の公式サイトや、Yahoo!のような全く関係のないサイトでも発生しますでしょうか？）また、問題のある画面のスクリーンショットをご共有いただいてもよろしいでしょうか？
※お知らせいただいているLightning公式サイトのもので構いません。詳細を確認したいので、できるだけ無編集のものを貼り付けていただけますと幸いです。お世話になっております。
ご確認いただきありがとうございます。
スクリーンショットを添付いたします。
添付画像は、X-T9の公式サイトをiPhone 17のGoogle Chromeで横向き表示した際の画面です。
ページ全体が左へずれ、左側が見切れた状態となっております。なお、現時点で確認している範囲では、
Safariでは正常に表示されます。
Googleアプリ内ブラウザでも正常に表示されます。
Google Chromeで横向き表示にした場合のみ現象が発生します。お手数をお掛けしますが、ご確認のほどよろしくお願いいたします。
harapekotaku 様
画像ご共有ありがとうございます！
確かにセクションごとズレが起こっていますね……。本件について対応するとすれば、 Lightning / X-T9 双方のデフォルトCSSの微調整をしないといけない事案になると思われます。
また、本筋ではないのですが、1投稿につき複数の画像を投稿することが可能ですので、次回からご活用いただけますと幸いです。
（「Add another file」リンクから追加可能です）—
Vektor ご担当者 様
こちら、実機を持っていないとなかなか特定もしづらいのかな、と思いますが、根本の原因は分かりますでしょうか？
（おそらく、セーフエリアに関して改めて考慮し直す必要があるのかな、と思いますが……）harapekotakuさま
お世話になっております。iPhone 17 の Chrome（横向き表示）でのご報告ありがとうございます。
お使いの環境の再現・切り分けのため、お手数ですが以下について教えていただけますでしょうか。
① iOSのバージョン
「設定」→「一般」→「情報」内の「iOS バージョン（ソフトウェア・バージョン）」の数字をお知らせください。② > ヘッダーからフッターまでサイト全体が左へオフセットされたような状態となり、正常に中央揃えで表示されません。
とありますが、こちらはずっとずれたまま直らない、ということであっておりますか？③ 横向きにした後、画面に触れた場合の変化
左にずれた状態で少しスクロールすると、（左右にぐらつくなどして）ずれが直りますか？どうぞよろしくお願いいたします。
Y.INABAさま
検証にご協力いただき、ありがとうございます。【ユーザーの皆様へ】
また iPhone 17をご利用のユーザー様で同様の不具合などが確認できましたら、教えていただけますと幸いです。お世話になっております。
お忙しい中、ご確認いただきありがとうございます。
ご質問について回答いたします。① iOSのバージョン
26.5.2 です。② 現象について
はい、縦向きから横向きにした瞬間から、表示はずっと左へずれたままで、元に戻ることはありません。表示イメージとしては、2カラムレイアウトで例えると、
左側（約95％）にコンテンツ
右側（約5％）に「トップへ戻る」ボタン+左右余白あり。左10px程度、右に20px程度が配置されている状態。
本来はコンテンツの右下に表示される「トップへ戻る」ボタンがコンテンツの右側にはみ出した位置に表示（コンテンツと重なっていない状態）されております。その結果、ページ全体が左へオフセットされ、画面外にはみ出して見切れているような表示になります。
③ 横向き後に画面へ触れた場合
左へずれた状態のまま上下にスクロールしても、表示のずれは解消されません。なお、左右方向へ画面をドラッグすると、ページ全体が左右には動きません
よろしくお願いいたします。
harapekotaku さま
お世話になっております。詳細ありがとうございます。
まず、Chrome ですが 2026年7月時点で バージョン 151.0.7922.43 が最新となりますので、
もし最新版ではない場合は、アップデート後に同様の現象が改善するかお試しいただけますと幸いです。それでも改善しない場合、実機がないため推測にはなりますが、「トップへ戻る」ボタンの位置指定と、横向き表示へ切り替えた際のブラウザ側の再描画タイミングが影響し、位置がずれてしまっている可能性を疑っております。
お手数をおかけしますが、以下の内容で一度お試しいただけますでしょうか。
【追加CSSでの検証】
「外観」→「カスタマイズ」→「追加CSS」に、以下のコードを追加して保存してください。
.page_top_btn { right: 20px !important; bottom: 20px !important; }お手数をおかけいたしますが、お試しいただいた結果をご連絡いただけますと幸いです。
お世話になっております。
Chromをアップデートして、上記CSSを数値を変更したりも試しましたがコンテンツのズレは依然と全く変わらないが変わらずです。
.page_top_btnだけが移動（rightの数値を大きくするとするとコンテンツと重なる）するだけで、ズレ幅は変わらすでした。
よろしくお願いいたします。
harapekotakuさま
お世話になっております。Chromeのアップデート、追加CSSでのご確認、ありがとうございました。どちらを試してもズレ幅が変わらないとのことで、承知いたしました。
引き続きの確認となり恐縮ですが、以下2つのサイトを同じ横向きのChromeで開いていただき、同様のズレが起こるかどうか教えていただけますでしょうか。
① X-T9 プレーンデモサイト
② Lightning G3 デモサイト（トップページ）
③ Lightning G3 デモサイト（サービスページ）
それぞれのサイト・ページで、
- ページ全体が左にずれて右側が見切れるか
- それとも正常に表示されるか
を教えていただけますと助かります。もし可能であれば、こちらも画面のスクリーンショットを添付いただけますと幸いです。
お手数をおかけしますが、どうぞよろしくお願いいたします。
お世話になっております。
ご確認いただきありがとうございます。ご指定いただいた3つのサイトについて、同じ環境（iPhone 17・Chrome・横向き表示）で確認いたしましたので、スクリーンショットを添付いたします。
背景色の違いもあり分かりづらい部分はありますが、いずれのサイトもページ全体が左へずれているような印象を受けました。
私の環境では、Lightning公式サイトやX-T9公式サイトで発生している現象と同様の表示に見受けられます。
お手数をお掛けいたしますが、ご確認のほどよろしくお願いいたします。
harapekotaku さま
ご確認いただきありがとうございます。画面のキャプチャもありがとうございました。
実機での確認ができない状況のため、原因特定にはもう少しお時間をいただくことになりそうですが、進捗がございましたら改めてご報告いたします。【 ユーザーの皆様へ 】
iPhone 17 をお使いの方がいらっしゃいましたら、お手すきの際に以下をご確認いただけますと大変助かります。
Google Chrome（バージョンは最新）で下記のいずれかのサイトを開き、画面を横向きにしていただくと、
・ページ全体が左にずれて、右側が見切れて表示される
という症状が起きないかどうかをご確認いただきたいです。
症状が出た場合はiOSバージョンも教えていただけますと幸いです。【確認用サイト例】
・ Lightning 公式
・ X-T9 公式
- このトピックに返信するにはログインが必要です。
