Pixelシリーズで発生？「一瞬だけ崩れる」レイアウトバグとviewportの関係
発生する現象
特定の条件の時のみ、100vhなどのViewportに依存する単位を指定していると、その要素が伸びてしまう。
再びタップすると元に戻る。
発生する条件
再現性はやや特殊ですが、以下のような手順で発生が確認できました：
- すでに開いているタブで、URLバーをタップ、何も入力せずにそのままエンターキーを押すとバグる
- または、
.htaccessなどでリダイレクトされた直後にページが表示されるとバグる
再現された環境（※一部）
| 機種・OS | Chromeバージョン | 再現状況 |
|---|---|---|
| Pixel 7a／Android 15 | Chrome 135 | ✅ 再現した（異常） |
| Pixel 9／Android 15 | Chrome 最新版 | ✅ 再現した（異常） |
| XQ-CC44／Android 12 | Chrome 135 | ❌ 再現せず（正常） |
| SOG13／Android 15 | Chrome 135 | ❌ 再現せず（正常） |
| SCG08／Android 13 | Chrome 135 | ❌ 再現せず（正常） |
このように、Pixelシリーズ × Android 15 × Chrome という条件でのみ発生していることから、Pixel特有のレンダリング挙動の可能性が浮上しています。
「崩れる」の具体的な内容とは？
ここでいう「崩れ」とは、単にスタイルが乱れるといった話ではなく、CSSのvhやsvhなどビューポート依存の単位に対して、実際の画面より数百ピクセル分「高さが大きく算出されてしまう」という現象です。
たとえば以下のような影響があります：
height: 100vhを指定したセクションが、想定以上に縦に「伸びて」しまい、次の要素が画面外に押し出される- 見た目は空白が大きくなり、デザインが間延びして見える
- スクロール開始位置がズレる／タップ対象のボタンが意図しない位置に見える
しかもこのバグ、「一瞬だけ」発生する
この問題のやっかいな点は、ユーザーが画面を1回でもタップすれば、レイアウトが自動で元に戻ることです。
そのため、
- 初見では「たまたま？」と見逃しやすい
- 検証時も「一度開いたら正常だったのに…？」と混乱しやすい
という特徴があり、発見も再現も難しいものになっています。
解決方法（回避策）
今回の検証では、以下のmetaタグを <head> に追加したところ、バグは発生しなくなりました：
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">この interactive-widget=resizes-content は、ビューポートとOSキーボードの干渉を制御するChromeのオプションで、Androidの仮想キーボードやブラウザUIとの干渉を明示的に制御できるものです。
この設定を加えることで、Pixel端末でも正しいビューポートサイズが反映され、vhやsvhの単位も期待通りに動作するようになりました。
比較用サンプル
端末やOSバージョンによっては差が出ない可能性もありますが、Pixel端末をお持ちの方はぜひ比べてみてください。
まとめ
この事象はまだ仮説段階ですが、
- Pixelシリーズ特有？
- Android 15 + Chrome の組み合わせで発生？
- vh/svhの計算がページロード直後に一時的に狂う？
- 画面操作後に修正されるため気づきにくい？
といった点から、「なんかレイアウトが時々ズレる…」という曖昧な不具合の裏に潜んでいる可能性があります。
もし類似の問題に悩んでいる方がいれば、interactive-widget=resizes-content を導入してみることで、改善するかもしれません。
また、他の端末での再現や、似た事例をお持ちの方の情報も歓迎です！
最近、あるプロジェクトでスマートフォン実機検証を行っていた際に、ごく限られた環境でのみ発生するレイアウトの「崩れ」に遭遇しました。
その内容が少し気になったので、ここでまとめてみたいと思います。
現時点では「Pixel特有の可能性がある」程度の仮説ではありますが、同じような現象で悩んでいる方のヒントになれば幸いです。