WPでオリジナルテーマを作成したがiPhoneでの表示のみズレが生じる

ワードプレス、ウェブ制作初心者です。

ワードプレスでなんとかオリジナルテーマを作成し公開したところ、iPhone以外のデバイス（Mac含む）では問題なく公開できたのですが、iPhoneだけズレが生じてしまいます。背景が固定されず動いてしまい、加えて指定サイズいっぱいに画像がズームされ何の画像なのかも判断できない状態です。アンドロイド携帯の方で確認したところ正常に動いたので、アイフォンだけにエラーが起こってる状態です。

min-height: 100vh;
background-attachment: fixed;
background-size: cover;
background-position: center;

上記指定をした画像が、アイフォンにのみ効いてくれません。min-height: 100vh;のみ効いているようで、画像も固定されなければ、幅に応じてサイズ調整もしてくれず、画像がドアップになってしまっています。!important もつけてみましたが無理でした。

もちろん調べたのですが、ヒントになるような事例も探すことができずこちらにたどり着きました。
お力添えいただければと思います。

HTML---------------------------------------------

<section class="about-us">
   <div class="fixed-background background-1">
       <img src="#"" class="about-us-logo1">
	   <div class="arrow0">
	   <div class="arrow1"><span></span></div>
	   </div>	
   </div>

   <div class="scroll-background  background-color-1">
      <ul>
		  <li><h10>####</h10></li>
		  <li><p>####</p></li>
		  <li><a href=""><img src="#" alt="#" class="about-us-logo2"></a></li>
	  </ul>
   </div>
</section>


<main>
<section class="wrapper">	
   <div class="fixed-background background-2">
	  <div>
	    <p>####</p>
	  </div> 
   </div>

   <div class="scroll-background background-color-2">

CSS--------------------------------------------

body{
font-family: 'Noto Serif JP', serif;
margin: 0px !important;
color: #FFFFFF;
min-height: 100vh;
}

main{
background-image: url(#);
}

/* about-us*/

.fixed-background {
min-height: 100vh;
background-attachment: fixed;
background-size: cover;
background-position: center;
}

.background-1 {
background-image: url(http://shijima-fi.jp/wp-content/uploads/2021/12/IMG_8545-scaled.jpg);
}

.background-2 {
background-image: url(http://shijima-fi.jp/wp-content/uploads/2021/12/IMG_8507-scaled.jpg);
}

.background-color-1{
background-color: #---;
}

.wrapper .fixed-background{
min-height: 80vh;
display: table;
width: 100%;
}