background-size: cover;を設定していてもiPad pro（safari、chrome）で横画面の時だけ画像が5倍位に拡大される

Question

前提・実現したいこと

WEBサイトのトップページでbackground画像を画面いっぱいにするためにbackground-size: cover;を設定しています。
手持ちの機器でPCのブラウザ（chrome, edge, IE）及びiphone7,iphone12, ipad air, ipad pro 11インチ縦画面（safari, chrome）では想定通り表示されますが、ipad pro 11インチ横画面（safari, chrome）の時だけ画像が5倍位に拡大されて表示されてしまいます。
改善方法はあるでしょうか。
ipad airのOSは14.4.2, ipad proのOSは14.4です。

該当のソースコード

HTML

<div id="header" class="content-block">

CSS

#header{
	position: relative;			
	text-align: center;
	padding: 0 !important;
	background-image: url(../images/header_bg.jpg);
	background-size: cover;
}
.content-block{
	background:transparent no-repeat center center fixed;
	-webkit-background-size:100%;
	-moz-background-size:100%;
	-o-background-size:100%;
	background-size:100%;
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	overflow:hidden;
	padding: 20px 0;
}
@media (max-width: 1024px){
	.content-block{
	background:transparent no-repeat center center scroll;
	}
}

試したこと

PC版chromeでウィンドウ幅を変えたりipad指定などで検証しても問題なく表示されます。
ipad版safariで画面を分割すると横画面でも問題なく表示されます。

Comments

[soma]

まだ試してなければiOS Simulatorか実機(Webインスペクタ)で検証してみると良いかと思います。

iOS Simulator
https://blanche-toile.com/web/web-devtools-ios-simulator

Webインスペクタ
https://qiita.com/unsoluble_sugar/items/2a3d06631a6b8259dc44

[19740820]

お返事ありがとうございます。
早速WEBインスペクタで試してみました。
.content-blockのbackgroundからno-repeatを削除したら解決しました。
ありがとうございました。

Answer 1

.content-blockのbackgroundからno-repeatを削除