Ionic 7（Angular）中SCSS的background-attachment: fixed失效问题

我正在开发一个探索CSS设计的迷你应用，其中包含一个带渐变背景且背景固定的卡片网格组件。这个效果在Ionic 4里表现正常——滚动页面时，卡片的渐变背景会固定在视口位置；但把SCSS代码复制到Ionic 7（Angular/Tabs）项目后，背景不再固定，会随着页面滚动移动。我怀疑这和Angular新的独立模块系统有关，附上相关HTML和SCSS代码，想问问有没有遇到同类问题的开发者。

HTML 代码 #

<ol class="list">
  <li>
    <h3>
      Lorem Ipsum
    </h3>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
      standard dummy text ever since the 1500s
    </p>
  </li>
  <li>
    <h3>
      Lorem Ipsum
    </h3>
    <p>
      when an unknown printer took a galley of type and scrambled it to make
      a type specimen book.
    </p>
  </li>
  <li>
    <h3>
      Lorem Ipsum
    </h3>
    <p>
      It has survived not only five centuries, but also the leap into electronic typesetting,
      remaining essentially unchanged.
    </p>
  </li>
  <li>
    <h3>
      Lorem Ipsum
    </h3>
    <p>
      It was popularised in the 1960s with the release of Letraset sheets containing
      Lorem Ipsum passages
    </p>
  </li>
  <li>
    <h3>
      Lorem Ipsum
    </h3>
    <p>
      and more recently with desktop publishing software like Aldus PageMaker including versions
      of Lorem Ipsum
    </p>
  </li>
</ol>

SCSS 代码 #

@mixin gradient($angle: to right top){
    background: linear-gradient($angle, #051937, #004d7a, #008793);
}

ol{
    list-style-position: inside;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 0;
    max-width: 1200px;
    margin: auto;
    z-index: map-get($map: $z-index, $key: elm);
    position: relative;
    .red{
        @include gradient(to bottom right)
    }
    &>li{
        @extend .center-col;
        @extend .red;
        color: white;
        box-shadow: $z-depth-1;
        margin: 10px;
        padding: 10px;
        width: 320px;
        height: 190px;
        cursor: pointer;
        background-attachment: fixed; // <== 这行在Ionic 7失效，但在Ionic 4正常
        transition: all .25s ease;
        h3{
            text-decoration: underline;
            text-align: center;
            margin: 0 0 10px 0;
        }
        ul{
            padding: 0;
            li{
                text-decoration: none;
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Michael Artman