よくある背景を固定するやつ
CSSで背景画像を目いっぱい表示して、スクロールしないよう固定するとき多くの人はこのようなコードを書いているでしょう
よくある背景固定
body {
background-image: url('backgroundimage.png');
background-size: cover;
background-attachment: fixed;
background-position: center;
}
多くの場合これで理想通りのものになるはずです
少なくともこれを書くようなPCで見る分にはこれで十分でしょう
しかしスマホブラウザだとそうはいきません
見ての通りスクロールしてアドレスバーが見え隠れする瞬間に背景が途切れます
しかもこの度に背景画像の位置とサイズの補正が入るのでかなり煩わしいです
詳しくはわかりませんがbackgroundの範囲が切り替わっているような感じがするのでbackground系のプロパティをいじりまくっても解決できませんでした
どうにかする
しかしbackgroundを捨ててCSSのlvhを有効活用すれば解決可能です
完璧な背景固定
<!DOCTYPE html>
<html>
<head>
<!-- メタ要素はここでは省略 -->
<style>
body {
margin: 0;
background-color: black;
}
.main {
background-color: #007f007f;
margin-left: 15%;
margin-right: 15%;
padding-left: 5%;
padding-right: 5%;
height: 200vh;
color: white;
font-size: xx-large;
font-family: sans-serif;
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100lvh; /* ここにlvhを使うのがミソ */
object-fit: cover;
z-index: -1;
}
</style>
</head>
<body>
<img src="backgroundimage.png" alt="背景" id="bg">
<div class="main">
ここにめちゃくちゃ長い文章を書き連ねるイメージなんだけど特に書くものもないから埋めるの大変なんですよとりあえず今回示したいのはこういうふうにすればアドレスバーが見え隠れする瞬間でも背景が出せるよってこと
</div>
</body>
</html>
するとこうなります。
見ての通りアドレスバーが見え隠れする瞬間でも最後までしっかり背景が詰まっていてトッポですね
これは100lvhによってアドレスバーで隠れる部分までの高さを背景領域としつつ、backgroudではなくimgで画像を置くことでビューポート外も描画させるようにして実現しています。
100lvhはPCでは100vhと等価なはずなので表示には影響しません
普通にアプリのChrome側で解決してほしい気もします…
追記
よくよく考えたらbottom: 0;の方がいい気がしてきました
つまりこうなりますね
#bg {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 100lvh;
object-fit: cover;
z-index: -1;
}