MRRI

Webサイトをスマホで閲覧した際に、画面下部や上部に position: fixed; を適用した要素（ヘッダーやフッター）が、小刻みに動いたりガタガタしたりすることがあります。この現象は、特に iOS の Safari や Chrome で発生しやすい問題です。

この記事では、その原因と具体的な解決策を紹介します。

原因 1: スクロール時のリフレッシュレートの影響

スマホのブラウザでは、スクロール時に画面が再描画されます。しかし、position: fixed; の要素の位置計算がリアルタイムで行われるため、スクロール時に細かいズレが発生し、ガタガタした動きになります。

解決策

will-change: transform; を指定することで、ブラウザが事前に描画を最適化し、ガタつきを軽減できます。

.fixed-element {
　position: fixed;
　bottom: 0;
　width: 100%;
　will-change: transform;　/*←コレを追加*/
}

原因 2: ビューポートの高さが動的に変化する

モバイルブラウザでは、スクロール時にアドレスバーやツールバーが表示・非表示されることで vh（ビューポートの高さ）が変わることがあります。特に height: 100vh; を使っている場合、スクロールとともに要素の高さが微妙に変動し、ガタつく原因になります。

解決策

vh の代わりに svh（Small Viewport Height）や lvh（Large Viewport Height）を使うことで、高さの変動を防ぐことができます。

.fixed-element {
　height: 10svh; /* スクロール時に安定する */
}

原因 3: transform: translateZ(0); による GPU レンダリングの影響

transform: translateZ(0); を適用すると、要素が GPU によってレンダリングされます。これにより、スクロール時の再計算が行われる際にズレが生じ、ガタつきの原因になります。

解決策

transform: translateZ(0); を削除し、代わりに will-change: transform; を適用すると、よりスムーズな動作になります。

原因 4: overflow: hidden; によるスクロール制限の影響

body や html に overflow: hidden; が適用されていると、スクロールが正しく処理されず、position: fixed; の要素が意図しない動きをすることがあります。

解決策

開発ツールで body や html の CSS を確認し、不要な overflow: hidden; があれば削除しましょう。

原因 5: CSS アニメーションや transition の影響

position: fixed; の要素に transition や animation が適用されていると、スクロール時に意図しない動きが発生することがあります。

解決策

transition や animation を一時的に無効にして、ガタつきが解消されるか確認してみましょう。

.fixed-element {
　transition: none;
　animation: none;
}

まとめ

スマホで position: fixed; の要素がガタガタする問題の原因と解決策をまとめると、以下のようになります。

原因	解決策
スクロール時のリフレッシュレート	will-change: transform; を適用
ビューポートの高さの変動	svh や lvh を使用
transform: translateZ(0); の影響	transform: translateZ(0); を削除
overflow: hidden; による影響	overflow: hidden; を削除
transition や animation の影響	transition: none; や animation: none; を適用