iPhone端网页parallax scroll图片显示异常问题求助（附代码）

1. 修正HTML结构与类名错误 #

• 移除<figure>的parallax-img类，避免样式冲突；
• 把第二个<img>的className改为原生HTML的class；
• 简化结构，<figure>仅作为语义化容器，视差动画仅作用于内部<img>。

修正后的HTML：

<div class="section-background">
  <figure>
    <img class="parallax-img" src="https://a.travel-assets.com/findyours-php/viewfinder/images/res70/363000/363235-Nice.jpg">
  </figure>
  <div class="content">
    <h2 class="ah2">WHERE EXCEPTIONAL ENTERTAINMENT — MUSIC, THEATRE, THE ARTS AND INSPIRING LECTURES — ENRICHES OUR CULTURE.</h2>
  </div>
</div>

<div class="section-background">
  <figure>
    <img class="parallax-img" src="https://static.vecteezy.com/system/resources/thumbnails/040/890/255/small_2x/ai-generated-empty-wooden-table-on-the-natural-background-for-product-display-free-photo.jpg">
  </figure>
  <div class="content">
    <h2 class="ah2">WHERE SHARING A GOOD LAUGH HELPS BUILD FRIENDSHIPS THAT LAST A LIFETIME.</h2>
  </div>
</div>

<div class="section-background">
  <figure>
    <img class="parallax-img" src="https://smart-tourism-capital.ec.europa.eu/sites/default/files/styles/embed_large/public/2021-09/Nice2.jpg?itok=3GEJXlT6">
  </figure>
  <div class="content">
    <h2 class="ah2">WHERE MUSIC UNDER THE REDWOODS CREATES A MAGIC SHARED WITH FRIENDS AND FAMILY.</h2>
  </div>
</div>

2. 优化CSS解决裁剪与模糊 #

• 让<img>的高度设为200%，确保滚动时覆盖整个视差区域；
• 添加image-rendering属性优化iOS上的图片清晰度；
• 用translate3d替代translateY触发GPU加速，避免动画时模糊；
• 移除冗余样式，统一控制.parallax-img。

修正后的CSS：

.ah2 {
  background: rgba(128,128,128,.5);
  font-size: 28pt !important;
  padding-top: 0.25em;
  width: 60%
}

.section-background {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.parallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%; /* 确保滚动时覆盖整个视差区域 */
  object-fit: cover;
  z-index: -1;
  will-change: transform;
  margin: 0;
  /* 优化iOS图片清晰度 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

3. 优化JavaScript性能与动画逻辑 #

• 添加节流函数，减少滚动事件触发频率，避免iOS上的性能卡顿；
• 确保动画目标是<img>而非<figure>；
• 用translate3d实现位移，提升iOS上的渲染流畅度。

修正后的JavaScript：

// 节流函数，控制滚动事件触发频率
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

document.addEventListener("scroll", throttle(function() {
  const sections = document.querySelectorAll('.section-background');
  sections.forEach(section => {
    const img = section.querySelector('.parallax-img');
    const rect = section.getBoundingClientRect();
    const sectionHeight = section.offsetHeight;
    // 计算滚动进度：0=区块完全在视口下方，1=区块完全在视口上方
    let progress = Math.min(Math.max(-rect.top / sectionHeight, 0), 1);
    // 映射为Y轴位移：从0到-sectionHeight
    const translateY = -progress * sectionHeight;
    // 使用translate3d触发GPU加速，避免iOS模糊
    img.style.transform = `translate3d(0, ${translateY}px, 0)`;
  });
}, 16)); // 约60fps的触发间隔

额外优化建议 #

• 为iOS设备提供2x/3x分辨率的图片，用srcset适配：

  <img class="parallax-img" 
       src="image.jpg" 
       srcset="image@2x.jpg 2x, image@3x.jpg 3x"
       alt="...">
  

• 避免使用过大尺寸的图片，压缩体积同时保留足够分辨率；
• 测试时关闭iOS的“降低透明度”等辅助功能，避免系统层面的渲染干扰。

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