background-attachment: fixed;とbackground-size: cover;を同時に指定をすると、IOSで問題が起きます。

iPhoneやiPadでは指定が無効になり、背景固定がされなくなってしまうのです。

パソコンでは問題なく背景固定されていますが、スマートフォンで見てみると背景固定されていないことが確認できると思います。

よく見る解決方法が【疑似要素】を、画面全体に配置して使用するというものです。

それがこちら！スマホで見ると、ちゃんと背景固定がされています。

●position fixedの背景はページ全体に表示されます。

→そのためiphoneのスワイプで、上下が見切れるときに背景が見えてしまう場合も！

また、他の要素に背景色を付けないと使えないなど利便性に欠けます。

●背景固定を複数個所使うことはできない

→jsでz-indexを切り替えるなど行えば可能ですが…かなり手間がかかります。

●横幅いっぱいの全画面表示にしか使えない

→width指定した要素の背景を固定したいという場合にこの方法は使えません

①HTMLで表示領域を指定（今回はsample3で、height20rem width50%を指定しています）

②clip-path: inset(0 0 0 0);で①で指定した大きさにクリッピング

③img画像をfixedで画面全体に指定

以上でより実用的な、clip-pathを使用した、背景固定のスマホ対応！が可能です！

background-attachment: fixed;とbackground-size: cover;を同時指定のバグの対処法でした。 今までは疑似要素で対応するか、スマホではfixedを解除していたのではないでしょうか？ この方法が参考になれば幸いです。