background-imageをfixedさせたい

Question

background-imageをある一つのsectionに固定したいのですが下記の記述だとiOSで効いてくれないので代わりの方法を教えてください。

background-size: cover ;
background-attachment: fixed;
→iOSは一緒に使えない。

・androidでは問題なく固定されます。
・キャッシュの削除は試しています。

    <section class="genre">
        <div class="genre_wrapper">
            <div class="genre_content">
                <div class="genre_bgc">
                </div>
                <img src="image/genre1.jpg" alt="キャンプ">
                <div class="genre_subject">
                    <p>キャンプ</p>
                </div>
                <div class="genre_moreBtn">
                    <p>more</p>
                </div>
            </div>
            <div class="genre_content">
                <div class="genre_bgc">
                </div>
　　　　　　　～～以下略～～

.genre{
    height: 100vh;
    position: relative;
    &::after{
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background-image: url(../../image/img3.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover ;
        background-attachment: fixed;
        z-index: -50;
        content: '';
    }

『試したみた事』

①background-size: 100% 100%;
→画面が拡大し過ぎてNG。

②position: fixedで固定
background-attachment: fixedを消してabsoluteをfixedに変更。

.genre{
    height: 100vh;
    position: relative;
    &::after{
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background-image: url(../../image/img3.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover ;
        z-index: -50;
        content: '';
    }

→background-imageがHTML全体に効いてしまう。

position: fixedを親要素にのみ効かせたいのですが、調べても解決できませんでした。

宜しくお願いします。

Answer 1

iOSでの背景画像は、coverとfixedを一緒につかえない仕様になっているので、
WEBで検索すると、困っている人もたくさんいるようです。

でも、以下のように、背景画像を擬似要素に適用するとできますよ。

body::before{
  content:"";
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  display:block;
  position:fixed;

  background-image:url(画像パス);
  background-size:cover;
}