HTML・CSS

background-attachment: fixed;がiOSで効かない！背景をパララックス風に設定するならclip-pathだ！

iOSのsafariさえ対応してくれればこんなめんどくさいコード書かなくて済むのに・・
でもiOSユーザーは多いので対応しなくちゃ気持ち悪い！ということで解決コードをいつでもコピペできるよう、メモとして貼り付けておく。

HTMLの設定

<div class="bg">//背景の大枠
<div class="bg-img"></div>//背景画像設定

<div class="content">
 //ここにコンテンツ入れる
</div>

</div>

SCSSの設定

.bg{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .bg-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0); //上下左右距離ゼロ
    z-index: -1;
    &::before{
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("../images/bg.jpg") no-repeat;
      background-size: cover;
      background-position: top center;
    }
  }
}

repeat・size・positionは画像によって変える。

background-attachment: fixed;が使えなくて検索してたら「clip」プロパティで解決する方法が沢山紹介されていた。
けど、スマホでフリックしたら背景がカクカクしたり消えたり挙動がおかしかったので「clip-path」に変えてみた。
するときれいに背景がパラララ〜とパララックス風にできた！
これでもう困らない〜

ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。