求助：Framer Motion移动端旋转图片闪烁故障排查

我用framer-motion开发单页应用，通过useScroll实现图片旋转动画，桌面浏览器运行流畅，但在低端智能手机上滚动时，图片会出现局部短暂闪烁/黑屏的情况。添加will-change: transform;后问题有所缓解，但偶尔仍有轻微闪烁；移除旋转效果后故障消失，改用CSS背景图也无法解决。

出现闪烁的组件代码如下：

<motion.div
  layout
  style={{
    rotate,
    borderRadius: paused ? radius : px,
    backdropFilter: 'blur(2px) saturate(0%)',
    scaleX: beat,
    scaleY: beat,
    transition: 'transform 340.5ms linear, border-radius 170.25ms ease-in-out',
    willChange: 'transform, border-radius',
    overflow: 'hidden',
    width: 'calc(100vh - 8rem)',
    maxWidth: 'calc(100vw - 2rem)',
    height: 'calc(100vh - 8rem)',
    maxHeight: 'calc(100vw - 2rem)',
    scale,
    margin: '2rem',
    boxShadow,
  }}
  className={clsx(
    'fix',
    'absolute lg:relative',
    'ml-4 md:!ml-16',
    'image-container',
    'max-w-[calc(100vw-1rem)]',
    'max-h-[calc(100vw-1rem)]',
    'lg:max-h-[50vw]',
    'lg:max-w-[50vw]',
  )}
>
  <motion.img className='w-full' src={img} style={{
    filter: imgFilter,
    opacity: opacityBg,
  }} />
  <svg className="progress" width="75" height="75" viewBox="0 0 100 100">
    <motion.circle
      cx="50"
      cy="50"
      r="50"
      className="indicator"
      style={{ pathLength: reverse, strokeWidth: '1px' }}
    />
    <motion.circle
      cx="50"
      cy="50"
      r="50"
      className="time"
      style={{ pathLength: progress, strokeWidth: '1px', position: 'absolute' }}
    />
  </svg>
</motion.div>

以下是具体排查思路：

• 强制硬件加速隔离：给旋转的motion.div和内部img添加transform: translateZ(0);或backface-visibility: hidden;，强制浏览器将元素分配到独立GPU图层，减少重绘冲突。注意不要滥用，避免过多图层占用内存。
• 简化复合变换属性：当前元素同时使用rotate、scaleX、scaleY、scale多个变换属性，尝试合并（比如将scaleX/scaleY整合到scale），减少GPU同时处理的变换数量。
• 缩小will-change优化范围：将will-change改为仅针对transform（移除border-radius），避免浏览器对非必要属性做预优化，减少资源消耗。
• 排查backdrop-filter影响：backdrop-filter会触发复杂图层合成，低端设备处理压力大。暂时移除该属性，若闪烁消失，可尝试用伪元素替代或降低模糊程度。
• 优化SVG层级：内部SVG进度圈使用position: absolute，可能与旋转图片的图层合成冲突。给SVG添加will-change: pathLength;或独立硬件加速属性，隔离图层。
• 禁用framer-motion的layout属性：layout会触发额外布局计算，滚动动画中可能加重负担。尝试移除layout，观察闪烁是否缓解。
• 确保图片加载完成：在图片完全加载后再启用旋转动画，避免滚动时图片未加载完成导致的渲染异常。可通过useEffect监听图片加载状态，加载完成后再应用动画。

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