javascript - 在过渡期间更新 CSS 属性，在所有浏览器中都很流畅，但在 Safari 中却非常有问题？

Question

这是我的意思的一个例子，这支笔是为了隔离我发现的错误而创建的，我正在寻求任何解决方案，使其在 Safari 中的工作方式与您在 Chrome、Firefox 或 Edge 中看到的方式相同。

https://codepen.io/kylewetton/pen/rNOOXBg

（请在 Safari 和 Chrome/Firefox/Edge 中尝试这支笔，看看有什么不同）

单击并在窗口周围拖动，球将跟随您的光标。

...
document.addEventListener('mousemove', ev => {
    let x = ev.clientX;
    let y = ev.clientY;
    active && move(x, y);
});

function move(x, y) {
    ball.style.left = `${x - 25}px`;
    ball.style.top = `${y - 25}px`;
};

这就是问题所在。球上有一个过渡CSS 属性，即使顶部和左侧不断更新，它也可以平滑地滑向光标。这似乎在所有浏览器中都能正确计算，但 Safari 无法处理。

#ball {
  ....
  transition: 0.2s ease-out;
}

有人对我有什么建议吗？

标签： javascriptcsssafari