Safari中Animate结合onpointermove持续重置问题求助

核心问题原因 #

Safari在处理连续mousemove事件时，会频繁触发回调打断CSS过渡动画，导致元素反复重置到初始位置，仅鼠标静止时过渡才能完成。

具体修复方案 #

1. 节流鼠标事件，避免动画频繁被打断 #

通过requestAnimationFrame节流mousemove回调，减少位置更新的频率：

let isTicking = false;

function updateFlashlight(e) {
  if (!isTicking) {
    window.requestAnimationFrame(() => {
      const flashlight = document.querySelector('.flashlight');
      flashlight.style.setProperty('--x', `${e.clientX}px`);
      flashlight.style.setProperty('--y', `${e.clientY}px`);
      isTicking = false;
    });
    isTicking = true;
  }
}

document.addEventListener('mousemove', updateFlashlight);

2. 改用硬件加速的transform属性 #

抛弃top/left定位，改用transform: translate()实现位移，同时开启硬件加速避免卡顿：

.flashlight {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0%, rgba(0,0,0,0.8) 70%);
  pointer-events: none;
  /* 使用transform实现位移，开启硬件加速 */
  transform: translate(var(--x, 0), var(--y, 0));
  /* 调整过渡曲线，适配连续移动场景 */
  transition: transform 0.15s cubic-bezier(0.2, 0, 0.2, 1);
  /* 告诉浏览器该元素会频繁变化，提前优化 */
  will-change: transform;
}

3. 禁用Safari默认的鼠标事件优化 #

添加CSS禁用浏览器对鼠标事件的默认节流：

body {
  touch-action: none;
}

效果验证 #

修改后在Safari测试：

• 鼠标移动时，手电筒会平滑跟随，不再出现重置问题
• 鼠标静止时，动画依然保持自然的缓动效果

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