スマホ表示で「background-attachment: fixed」が効かないときの対処法【クリティカルなバグ】

スマホ表示で「background-attachment: fixed」が効かないときの対処法【クリティカルなバグ】

こんにちは、ゆうが(@yuuuugablog)です。

最近スマホのレスポンシブ対応をしている時に、実機で確認していたら「background-attachment: fixedが効かない!」と戸惑いあせりました。

皆さんにはそんなってほしくないので、今回は原因と対処法を解説していきます。

スマホ表示で「background-attachment: fixed」が効かない理由

そもそもスマホ表示で背景画像が固定できないのは、クリティカルなバグが原因なんです。

「どういうことだよ」と思うので、一旦Can I use…で見てみると、

can i use 画面

赤線で囲ったところに英語で、「background-attachment:fixedとbackground-size:cover;を同時にiOSでは使うな」的なのが書いてあるんですよ。

なので、スマホ(iOS)ではこうしたバグが起きるんですね。これがクリティカルなバクです。

スマホ表示で「background-attachment: fixed」が効かないときの対処法

対処法としては、下記です。

MEMO
  • 画像にはbackground-size:cover;を指定する
  • 背景画像を入れたい範囲に:beforeを指定して、position:fixed;を変わりに使用する

要は別の指定をしろということですね。コードを書くとこうなります。

CSS
body::before {
background-image:url(./images/image.png)
background-image:no-repeat;
background-image:center;

background-size: cover;
content: "";

position:fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
}

イメージは、bodyそのものにfixedをする感じです。こうすれば直ります!

困っている方がいましたら試してください!