移动端固定背景图异常求助：React容器背景图滚动缩放错乱

我在React项目中构建了一个包含背景图和上层文字的容器，开发完成后发现，在移动端设备上，受地址栏影响，每次滚动方向变化时背景图都会被缩放，显示效果异常。

我曾查阅过相关解决方案，但由于不想将背景图设置在整个页面（仅需在该容器中），认为该方案不适用。同时我也不想使用transition: height 999999s这类方案，因为会导致屏幕旋转时页面异常。

以下是出现问题的代码：

<div>
  <section>
    <h2>Container Before</h2>
    <p>SOME RANDOM TEXT</p>
  </section>
  <section class="section">
    <div class="imageContainer">
      <div class="innerContent">
        <h2>Random Text</h2>
        <p>
          Received the likewise law graceful his. Nor might set along charm
          now equal green. Pleased yet equally correct colonel not one. Say
          anxious carried compact conduct sex general nay certain. Mrs for
          recommend exquisite household eagerness preserved now. My improved
          honoured he am ecstatic quitting greatest formerly. Extended
          kindness trifling remember he confined outlived if. Assistance
          sentiments yet unpleasing say. Open they an busy they my such
          high. An active dinner wishes at unable hardly no talked on.
          Immediate him her resolving his favourite. Wished denote abroad at
          branch at. Ham followed now ecstatic use speaking exercise may
          repeated. Himself he evident oh greatly my on inhabit general
          concern. It earnest amongst he showing females so improve in
          picture. Mrs can hundred its greater account. Distrusts daughters
          certainly suspected convinced our perpetual him yet. Words did
          noise taken right state are since. You disposal strongly quitting
          his endeavor two settling him. Manners ham him hearted hundred
          expense. Get open game him what hour more part. Adapted as smiling
          of females oh me journey exposed concern. Met come add cold calm
          rose mile what. Tiled manor court at built by place fanny.
          Discretion at be an so decisively especially. Exeter itself object
          matter if on mr in. Sussex on at really
        </p>
      </div>
    </div>
  </section>
  <section>
    <h2>Container After</h2>
    <p>SOME RANDOM TEXT</p>
  </section>
</div>

.section {
  background-color: black;
}

.imageContainer {
  width: 100%;
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}

.imageContainer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(https://img.freepik.com/free-photo/beautiful-view-greenery-bridge-forest-perfect-background_181624-17827.jpg?w=2000);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 5.4% 0;
  opacity: 0.5;
}

.innerContent {
  padding: 2rem 1.5rem;
  margin: 1rem auto;
  width: 100%;

  position: relative;
  z-index: 9;
  text-align: left;
  color: white;
  opacity: none;
}
@media screen and (min-width: 768px) {
  .innerContent {
    width: 750px;
  }
}
@media screen and (min-width: 992px) {
  .innerContent {
    padding: 2rem 10rem;
    width: 980px;
  }
}
@media screen and (min-width: 1200px) {
  .innerContent {
    width: 1170px;
  }
}
@media screen and (min-width: 1400px) {
  .innerContent {
    width: 1370px;
  }
}

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