Safari浏览器下CSS transition异常 自定义光标卡顿如何解决

问题核心原因 #

卡顿并非-webkit-前缀缺失导致，核心是3个Safari特有渲染机制问题：

• Safari 对transform属性内嵌套*calc()*的动画计算存在性能缺陷，鼠标移动时会触发重排，而非仅调用合成层渲染
• 光标元素未被提升为独立GPU合成层，mix-blend-mode属性在非合成层下会触发全页面重绘
• 直接在mousemove回调里同步修改DOM样式，在Safari下会和渲染帧不同步，直接导致动效不跟手

修复后完整实现 #

HTML 代码 #

<div class="cursor"></div>

CSS 代码 #

* {
  cursor: none; /* 全局隐藏系统光标，避免双光标问题 */
}
body{
  background: #fff;
  width: 100%;
  height: 100vh;
  margin: 0;
}
.cursor{
    position: fixed;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    /* 提前计算居中偏移，避免transform内嵌套calc */
    margin-left: -12.5px;
    margin-top: -12.5px;

    transition-duration:0.3s;
    -webkit-transition-duration:0.3s;

    transition-timing-function: cubic-bezier(.33,.81,.66,.95);
    -webkit-transition-timing-function: cubic-bezier(.33,.81,.66,.95);
    
    background-color: #fff;
    mix-blend-mode: difference;
    border-radius: 50%;
    pointer-events: none;
    /* 强制提升为GPU合成层，开启硬件加速 */
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    will-change: transform;
    /* 关闭Safari下合成层隐式渲染延迟 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

JS 代码 #

const cursor = document.querySelector('.cursor');
let ticking = false;
let x = 0, y = 0;

document.addEventListener('mousemove', (e) => {
  x = e.clientX;
  y = e.clientY;
  if (!ticking) {
    // 同步浏览器渲染帧更新位置，避免事件触发和刷新率不同步
    window.requestAnimationFrame(() => {
      cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;
      ticking = false;
    });
    ticking = true;
  }
});

关键适配点说明 #

• 把原本写在transform里的calc(-50%)居中逻辑，替换为提前计算好的负margin，规避Safari对transform内calc表达式的低效计算问题
• 用3D变换translate3d替代2D变换translate，配合will-change: transform和backface-visibility: hidden强制元素进入独立GPU合成层，避免mix-blend-mode触发全页重绘
• 加入requestAnimationFrame帧同步节流，保证光标位置修改和浏览器渲染节奏完全对齐，解决Safari下mousemove事件触发频率和屏幕刷新率不匹配导致的跟手性差问题
• 全局添加cursor: none隐藏系统默认光标，避免自定义光标和系统光标同时出现的体验问题

若页面存在按钮、链接等可交互元素，只需在对应元素hover时给自定义光标添加缩放、变色样式即可，不会影响核心动效性能。

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