iOS issue: background-size:cover/parallax (not responsive)

问题

I have 4 divs stacked each with an img background covering the viewport, and I have a parallax effect (with GSAP) that moves the images at a different speed than the scrolling as I scroll down.

This works fine on all devices except iOS: after deployment, while it still works perfectly on desktop and Android, the images don't scale down on iPhone so I see a clipped portion of my images, zoomed in.

I'm aware there's an issue with background-size:cover and background-attachment:fixed on iOS, but I really would love to find a way to give iOS users the right experience.

I tried using background-attachment:scroll and the images look fine in that case, but then my parallax doesn't work well as it creates a gap between each div as I scroll down.

I created a simplified runnable snippet below, and a more complete pen HERE, with the overlays and some mockup content.

Is there a way to fix this for iOS?

gsap.utils.toArray("section").forEach((section, i) => {
  section.bg = section.querySelector(".bg");
  if (i) {
    section.bg.style.backgroundPosition = `50% ${innerHeight / 2}px`;

    gsap.to(section.bg, {
      backgroundPosition: `50% ${-innerHeight / 2}px`,
      ease: "none",
      scrollTrigger: {
        trigger: section,
        scrub: true
      }
    });
  } else {
    section.bg.style.backgroundPosition = "50% 0px";

    gsap.to(section.bg, {
      backgroundPosition: `50% ${-innerHeight / 2}px`,
      ease: "none",
      scrollTrigger: {
        trigger: section,
        start: "top top",
        end: "bottom top",
        scrub: true
      }
    });
  }
});

section {
  position: relative;
  height: 100vh;
}

.bg {
  background-image: url("https://images.unsplash.com/photo-1601541510526-aa66ecee3139?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

<div class="container-fluid">
  <section class="row">
    <div class="bg col"></div>
  </section>
  <section class="row">
    <div class="bg col"></div>
  </section>
  <section class="row">
    <div class="bg col"></div>
  </section>
  <section class="row">
    <div class="bg col"></div>
  </section>
</div>

来源：https://stackoverflow.com/questions/64605340/ios-issue-background-sizecover-parallax-not-responsive