【バグ解説】iOSでbodyのoverflow:hiddenが効かない原因と解決方法

RELEASE / 2024.7.25 UPDATE / 2024.07.25

bodyタグ

iOS

overflow:hidden

バグ

ある時、iOSで表示した時だけページが横スクロールしていることにきがつきました。
要素がはみ出しているから横スクロールを消すためのoverflow-x:hiddenが指定されているのみ正しく効いていませんでした。
そこで色々調べてみるうちにiOS特有の現象という事が分かってきました。
この記事ではiOSだけ、bodyタグに指定したoverflow:hiddenが効かない理由と解決方法をご紹介したいと思います。

この記事の目次を表示

1 原因
2 解決方法
- 2.1 【解決方法1】htmlタグにoverflow:hiddenを指定する
- 2.2 【解決方法2】bodyタグ直下に全体を囲うタグを作りoverflow:hiddenを指定する
3 まとめ

原因

iOSの場合、bodyタグにoverflow:hiddenを指定しても効きません。
デフォルトで反映される値をいくつか調整してみましたが、どんな指定をしても効きませんでした。
詳しい原因は分かりませんが、iOSの場合はそういう仕様なんだと思います。

解決方法

解決方法はいくつかあります。

【解決方法1】htmlタグにoverflow:hiddenを指定する

htmlタグにoverflow:hiddenを指定します。


html {
    overflow: hidden;
}
/* body {
    overflow: hidden;
} */

もしくは

html,
body {
    overflow: hidden;
}

これで正しくoverflow:hiddenの指定が反映されます。

【解決方法2】bodyタグ直下に全体を囲うタグを作りoverflow:hiddenを指定する

bodyタグ直下にコード全体を囲うタグを作り、そのタグにoverflow:hiddenを指定します。

<body>
    <div class="all-wrap">

    </div>
</body>

そして、CSSは以下のように指定します。

/* body {
    overflow: hidden;
} */
.all-wrap {
    overflow: hidden;
}

これで正しくoverflow:hiddenの指定が反映されます。

まとめ

いかがでしたか？
ブラウザによって、OSによって、もしくは機種によってはCSSが効かないということは時々あります。
この辺りはブラウザの仕様だからいつか統一され解消するかもしれないし、されないかもしれません。
2024年7月時点では、iOSではbodyタグに指定したoverflow:hiddenは効かないということを頭の片隅に入れておきましょう。