記事公開日

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>

関連情報

運営者プロフィール
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール