嘿，我在做类似滚动驱动视频动画的时候，也踩过iOS Safari的不少坑，结合我之前的调试经验，给你几个针对性的解决方案，应该能解决你遇到的帧跳、卡顿问题：

1. 用原生CSS滚动驱动动画替代JS（优先推荐） #

iOS 16.4及以上版本已经支持CSS原生的滚动驱动动画，这是性能最好的方案——完全绕开JS的性能瓶颈，由浏览器原生处理视频帧和滚动的同步，根本不会有卡顿或跳帧问题。

用法很简单：

/* 给滚动容器定义滚动时间线 */
.your-scroll-container {
  scroll-timeline: --videoScrollTimeline vertical;
}

/* 给视频绑定动画 */
video {
  animation: syncVideoWithScroll linear;
  animation-timeline: --videoScrollTimeline;
  /* 动画覆盖整个滚动范围 */
  animation-range: 0% 100%;
}

/* 定义动画：从视频0秒滚动到总时长 */
@keyframes syncVideoWithScroll {
  from {
    video-current-time: 0s;
  }
  to {
    video-current-time: 15s; /* 替换成你的视频总时长 */
  }
}

如果你的用户群体大多是iOS 16.4+，这个方案直接一步到位，比JS方案靠谱太多。

2. 用requestVideoFrameCallback精准控制帧同步 #

如果需要兼容更低版本的iOS，那一定要用视频专用的requestVideoFrameCallbackAPI，而不是直接在滚动事件里瞎改currentTime——iOS Safari对直接设置currentTime的限制很多，容易出现跳帧或延迟。

这个API会在视频准备好渲染下一帧时触发，能保证时间设置的精准性：

const video = document.querySelector('your-video-selector');
let targetTime = 0;

// 先监听视频加载完成，确保能获取到正确的时长
video.addEventListener('loadedmetadata', () => {
  // 启动帧回调监听
  syncVideoToScroll();
  
  // 滚动时只计算目标时间，不直接操作视频
  window.addEventListener('scroll', () => {
    // 这里替换成你的滚动位置转视频时间的逻辑
    const scrollProgress = window.scrollY / (document.body.scrollHeight - window.innerHeight);
    targetTime = scrollProgress * video.duration;
  });
});

function syncVideoToScroll() {
  video.requestVideoFrameCallback(() => {
    // 只有当当前时间和目标时间差超过阈值时才更新，减少不必要操作
    if (Math.abs(video.currentTime - targetTime) > 0.01) {
      video.currentTime = targetTime;
    }
    // 循环监听下一帧
    syncVideoToScroll();
  });
}

这种方式能避免滚动事件频繁触发导致的JS阻塞，让视频帧更新和浏览器渲染步调一致。

3. 优化视频本身的兼容性和性能 #

iOS Safari对视频编码、格式很挑剔，这也是导致卡顿的常见原因：

• 一定要用H.264编码的MP4格式，别用VP9或其他小众格式，iOS对H.264的硬件解码支持最好；
• 降低视频分辨率和帧率：比如用1080p/30fps就足够，太高的分辨率会让iOS的硬件解码压力过大，导致帧跳；
• 给视频标签加muted和playsinline属性：iOS Safari只允许静音、内联播放的视频自动加载和控制，缺少这两个属性可能会触发额外的限制；
• 尝试开启preload="auto"：虽然iOS可能不会完全预加载，但能让浏览器提前加载更多帧，减少滚动时的加载延迟。

4. 节流滚动事件，避免JS阻塞 #

iOS的滚动是系统级的，滚动过程中JS的执行优先级很低，如果滚动事件里做太多操作，会直接导致卡顿。所以一定要给滚动事件加节流：

let isProcessingScroll = false;
window.addEventListener('scroll', () => {
  if (!isProcessingScroll) {
    window.requestAnimationFrame(() => {
      // 这里只做计算目标时间的轻量操作，不要直接改video.currentTime
      calculateTargetTime();
      isProcessingScroll = false;
    });
    isProcessingScroll = true;
  }
});

把视频帧的更新逻辑放到requestVideoFrameCallback里，而不是滚动事件里，能最大程度减少JS对滚动的干扰。

试试这些方案，应该能解决你在iPhone上遇到的问题～

备注：内容来源于stack exchange，提问作者henrymh3