- 記事公開日
iPhoneでスクロールすると、背景画像が一瞬カクッとなる
iPhoneで見ると、下の方にスクロールしたときに、背景画像が一瞬カクッってなるの。
気になるんだけど、どうしたら直るの？
これは、iPhoneだけに表示されるメニューバーが原因です。
下にスクロールすると、メニューバーが消えるため、その瞬間に背景画像の大きさが変わります。
その画像が切り替わった瞬間に「カクッ」となっているように見えています。
この不具合を対象するには、CSSで指定してある高さをiPhone用に書き換えなくてはいけません。
JavaScriptでメニューバーを除いた高さを取得し、CSSカスタムプロパティで高さの計算を行います。
.bg {
width:100%;
height:calc(var(--vh,1vh) * 100);
background:url('image/suika.jpg') no-repeat;
background-size:auto 100%;
}<html>
<head>
<script>
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
</script>
</head>
<body>
<div class="bg"></div>
</body>
</html>