为何GSAP动画在PC端Chrome移动端视图正常，真机显示异常？

我开发的项目中包含一个滚动触发的GSAP动画，该动画在PC端、Chrome浏览器设备工具栏的移动端视图中均正常运行，但在真实手机上显示异常。相关GSAP代码片段如下：

roadmap.forEach((item) => {
  const left = item.querySelector(".left")
  const right = item.querySelector(".right")
  gsap.to(left, {
    x:"-100vw",
    duration:1,
    scale:3,
    scrollTrigger:{
      trigger:item,
      start:"top 5%",
      end:"115% 30%",
      ease:"none",
      scrub:false,
      toggleActions:"play none reverse reverse"
    }
  })
  gsap.to(right, {
    x:"100vw",
    duration:1,
    scale:3,
    scrollTrigger:{
      trigger:item,
      start:"top 5%",
      end:"115% 30%",
      ease:"none",
      scrub:false,
      toggleActions:"play none reverse reverse"
    }
  })
})

尝试修改ScrollTrigger的start和end参数后问题仍未解决，以下是针对性的排查和修复方案：

• 修正视口单位适配问题
  代码中使用100vw作为位移值，但真实移动端的浏览器导航栏、状态栏会占用视口空间，导致vw的实际计算值和预期不符。可以改用动态视口宽度计算替代固定vw值：

  gsap.to(left, {
    // 替换x:"-100vw"为动态计算的视口宽度
    x: () => -window.innerWidth,
    // 其余配置不变
    duration:1,
    scale:3,
    scrollTrigger:{
      trigger:item,
      start:"top 5%",
      end:"115% 30%",
      ease:"none",
      scrub:false,
      toggleActions:"play none reverse reverse"
    }
  })
  // right元素同理替换x:"100vw"为() => window.innerWidth
  

• 统一滚动触发行为
  真实移动端的滚动回弹、视口高度变化等特性，会导致ScrollTrigger的触发区域计算偏差。可以通过以下配置优化：

  1. 开启ScrollTrigger的滚动归一化，抹平不同设备的滚动行为差异：

     gsap.registerPlugin(ScrollTrigger);
     ScrollTrigger.normalizeScroll(true);
     

  2. 将start/end的百分比改为固定像素值，避免视口变化时的计算误差，比如start: "top 100px"；
  3. 启用轻微的scrub值（如scrub: 0.1），让动画与滚动动作更同步，减少触发延迟。

• 优化移动端渲染性能
  真实移动端的GPU渲染优先级与PC不同，同时执行scale和x变换可能引发重绘异常。给动画元素添加CSS优化，强制GPU加速：

  .left, .right {
    will-change: transform;
    transform: translateZ(0);
  }
  

• 检查触发元素的布局一致性
  确认真实移动端上触发元素item的实际尺寸、位置是否与PC端一致——移动端专属的CSS样式（如响应式布局、padding/margin调整）可能改变元素布局，进而影响ScrollTrigger的触发范围。可以在移动端调试时打印元素尺寸：

  console.log(item.getBoundingClientRect());
  

  对比PC端的输出数据，排查布局差异。

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