iOS问题：background-size：cover / parallax无响应

编程问答 2022-06-05

问题描述

我有4个div，每个div都有一个覆盖视口的img背景，并且具有视差效果（使用GSAP），当向下滚动时，该图像以与滚动不同的速度移动图像。

这在所有 iOS 设备上均能正常运行：部署后，尽管在台式机和Android上仍能完美运行，但是图像在iPhone上无法按比例缩小，因此我看到了图像的一部分，放大。

我知道iOS上的background-size:cover和background-attachment:fixed存在问题，但是我真的很想找到一种方法来为iOS用户提供正确的体验。

我尝试使用background-attachment：scroll，并且在这种情况下图像看起来还不错，但是随后我的视差效果不佳，因为当我向下滚动时，它会在每个div之间产生间隙。

我在下面创建了一个简化的可运行代码段，以及一个更完整的笔HERE，其中包含了叠加层和一些模型内容。

是否可以解决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,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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

background-attachmentbackground-imagegsapiosios