iOS移动端Accordion展开引发Parallax视差图片跳动问题

针对iOS Safari/Chrome中Accordion展开导致视差背景跳动的问题，以下是几种更规范的修复方案，从触发时机、计算逻辑、渲染优化三个维度解决：

1. 绑定Accordion动画结束事件触发视差重计算 #

ResizeObserver会在Accordion展开的动画过程中多次触发，而iOS内核在动画阶段的滚动参数不稳定，导致视差计算偏差。改为在Accordion的高度过渡/动画结束后再触发视差更新：

// 假设Accordion元素使用transition控制高度变化
document.querySelectorAll('.accordion').forEach(accordion => {
  accordion.addEventListener('transitionend', (event) => {
    // 仅在高度相关属性变化结束时触发
    if (['height', 'max-height'].includes(event.propertyName)) {
      onResize(parallaxDetails);
    }
  });
});

2. 修正视差计算的滚动基准值并添加防抖 #

iOS中window.scrollY在内容高度突变时可能出现临时取值错误，改用更稳定的滚动基准值，并通过防抖避免频繁计算：

function onResize(details) {
  // 防抖：50ms内重复触发则重新计时
  clearTimeout(this.resizeTimer);
  this.resizeTimer = setTimeout(() => {
    // 取更稳定的滚动距离值
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 替换原视差计算逻辑中的滚动值引用
    // 示例：更新视差背景位置
    details.parallaxElement.style.transform = `translateY(${scrollTop * details.speed}px)`;
  }, 50);
}

3. 给视差容器添加硬件加速优化 #

通过CSS让视差容器进入GPU渲染层，减少iOS下高度变化时的重绘抖动：

.parallax-container {
  will-change: transform;
  transform: translateZ(0);
  /* 保留原有样式 */
}

4. 用MutationObserver替代ResizeObserver精准监听 #

如果需要监听容器高度变化，MutationObserver可以更精准控制触发场景，避免不必要的计算：

const parallaxContainer = document.querySelector('.parallax-container');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 监听容器样式变化或子元素增减（导致高度变化）
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      onResize(parallaxDetails);
    } else if (mutation.type === 'childList') {
      // 子元素变化后延迟100ms再计算，确保布局稳定
      setTimeout(() => onResize(parallaxDetails), 100);
    }
  });
});

observer.observe(parallaxContainer, {
  attributes: true,
  childList: true,
  subtree: true
});

临时方案的问题说明 #

你当前使用的ResizeObserver会在Accordion展开的动画过程中多次触发，而iOS的WebKit内核在动画阶段会频繁重排，导致滚动参数（如scrollTop）的临时不准确，进而引发视差计算偏差，表现为背景跳动。上述方案通过控制触发时机、优化计算逻辑、提升渲染性能，从根源解决该问题。

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