パララックス背景を実装してiPhoneで見てみたら上手く動かなかったので、調べてみたところ、background-attachiment:fixed;で背景を固定するやり方は、iOS端末では対応していないことがわかった。
そこで上記のCSSを使わずにパララックス背景にする方法を調べて、上手く実装できた。

パララックス背景とは

パララックス（視差効果）は、近年のWEBサイトでよく見る「背景が固定」されているものである。
ChatWorkのサイトでも実装されています。（2021年4月現在）

背景を固定することで、Webサイトに視覚の差異やスピード感・奥行きを演出できます。
おしゃれなサイトにはもってこいの表現技法です。

本題

まず、最初に一般的なbackground-attachiment:fixed;を使ったやり方の場合。

<div class="example">
     <p>test</p>
</div>

.example {
     background-image: url(./img/example.jpg);
     background-attachment: fixed;
}

divに付与したexampleというクラス内で、example.jpgという背景画像を指定。
そこにbackground-attachment:fixed;を置くことで、背景画像を固定していますね。
そのため、スクロールすると背景は動かず周りの要素だけが動くので、不思議な感じになります。

しかし！！！！

これをSafariから見ると、なぜか背景はbackground-attachment:fixed;する前の状態のままなのです。。。

調べてみると、下記の記述があるサイトを見つけました。

iOS端末では「background-attachment: fixed」は効かないらしい
「background-attachment」は、スクロールする時に背景画像を固定したままにするか、
スクロールに合わせて移動させるかどうかを指定するためのれっきとしたcssプロパティです。
なので、このプロパティが間違った記述というわけではありません。
ですが、この「background-attachment」と一緒に「background-size: cover」というプロパティを一緒に記述すると、iPhone端末でバグが発生してしまいます。
これは公式でも確認されているiOSの不具合らしいです。

引用元：【パララックス・iOS】background-attachment: fixedがスマホで効かない！？原因と解決法を解説

結構簡単に対応できました

記述し直さないといけないのではないか、と倒れそうになりましたが
結構すぐに対応できました！

擬似要素のbeforeを使用していきます。

まず、先ほどのCSSの一個上に親divを追加。

<div class="example">
     <div class="example-children">
          <p>test</p>
     </div>
</div>

追加した親divに擬似要素beforeを追加します。

.example::before {
     content:"";
     display:block;
     position:fixed;
     top:0;
     left:0;
     z-index:-1;
     background-image: url(./img/example.jpg);
     position: fixed;
}

背景をposition:fixedで背景画像固定して、
他の要素が上に重なっているみたいなイメージです。（多分）
なので他の要素より一個下に表示させるため、z-index:-1;をつけています。
また、他の要素も、白背景でもきちんとbackground-color: #fffってやらないと
背景画像がずっと見えてる状態になりますのでご注意を。。。

これは一部分だけパララックス背景にする場合に使えます。
複雑にパララックスが入り組んだサイトにする場合は、JQueryとか使う方が早いかもです。