― 【CSS】豆知識コラム
2023.05.19
【CSS】background-attachment:fixedのバグをclip-pathで解決!
目次
background-attachment: fixedがスマホで効かない原因
【疑似要素で】background-attachment: fixedをスマホで再現
background-attachment: fixedがスマホで効かない原因
background-attachment: fixed;とbackground-size: cover;を同時に指定をすると、IOSで問題が起きます。
iPhoneやiPadでは指定が無効になり、背景固定がされなくなってしまうのです。
パソコンでは問題なく背景固定されていますが、スマートフォンで見てみると背景固定されていないことが確認できると思います。
【疑似要素で】background-attachment: fixedをスマホで再現
よく見る解決方法が【疑似要素】を、画面全体に配置して使用するというものです。
それがこちら!スマホで見ると、ちゃんと背景固定がされています。
この方法の落とし穴
●position fixedの背景はページ全体に表示されます。
→そのためiphoneのスワイプで、上下が見切れるときに背景が見えてしまう場合も!
また、他の要素に背景色を付けないと使えないなど利便性に欠けます。
●背景固定を複数個所使うことはできない
→jsでz-indexを切り替えるなど行えば可能ですが…かなり手間がかかります。
●横幅いっぱいの全画面表示にしか使えない
→width指定した要素の背景を固定したいという場合にこの方法は使えません
【横幅指定可能!】clip-pathを使用した、背景固定のスマホ対応!
①HTMLで表示領域を指定(今回はsample3で、height20rem width50%を指定しています)
②clip-path: inset(0 0 0 0);で①で指定した大きさにクリッピング
③img画像をfixedで画面全体に指定
以上でより実用的な、clip-pathを使用した、背景固定のスマホ対応!が可能です!
まとめ
background-attachment: fixed;とbackground-size: cover;を同時指定のバグの対処法でした。 今までは疑似要素で対応するか、スマホではfixedを解除していたのではないでしょうか? この方法が参考になれば幸いです。