CSS转换使用CSS动画时，仅在Safari中进行不同的转换

这很难解释，所以我做了一个密码笔。尝试在Chrome和Safari中打开它，然后在codepen视口中单击以查看差异：

基本上，我们有一个点，在一些javascript的帮助下跟随光标。CSS动画使其始终缓慢地增长/收缩，当您单击该点时，其反应是大幅收缩

在Chrome和Firefox中，单击时，圆点收缩到鼠标指针所在的中心。但在Safari中，它会缩小到左上角。我发现，通过删除CSS动画，可以解决这个问题。但我不明白为什么

知道如何在Safari中修复此行为吗

aaaaaaa显然我不能发布这个，除非我的代码笔链接是“附带代码”。这里有一些代码

//HTML

<span id="custom-cursor"></span>

//Javascript

(function () {
  var follower, mouseX, mouseY, positionElement, timer;
  follower = document.getElementById('custom-cursor');
  console.log(follower);
  mouseX = event => { return event.clientX; };
  mouseY = event => {return event.clientY;};
  positionElement = event => {
    var mouse;
    mouse = {
      x: mouseX(event),
      y: mouseY(event),
    };

    follower.style.top = mouse.y + 'px';
    follower.style.left = mouse.x + 'px';
  };
  window.onmousemove = event => {
    if(!timer){timer = false;}
    var _event;
    _event = event;
    return timer = setTimeout(() => {
      return positionElement(_event);
    }, 5);
  };
}).call(this);

$(document).on('mousedown', function() {
  $('#custom-cursor, #imghover-cursor').addClass('clicking');
});
$(document).on('mouseup', function() {
  $('#custom-cursor, #imghover-cursor').removeClass('clicking');
});

---

浏览器以不同的方式呈现代码。。。。您可以更新其代码，使其在项目的“受支持的浏览器”中表现得像您想要的那样，或者采用用户代理嗅探方式/每浏览器类型的方式。我不建议这样做，我也从不这样做，因为几乎总有一种方法可以使用选项#1实现，它更简单、更干净、更容易[更改您使用的库和/或调整现有代码]

当我建议“改变动画库”时，我的意思是更具体地说，使用一个开源社区，比如GSAP

但如果你想进入兔子洞，请从这里开始：

---

浏览器以不同的方式呈现代码……您可以更新其代码，使其在项目的“受支持的浏览器”中表现出所需的行为，或者采用用户代理嗅探方式/每浏览器类型的方法。我不建议这样做，我也从不这样做，因为几乎总是有一种方法可以使用选项#1来完成，该选项更简单、清晰更简单更容易[更改您使用的库和/或调整现有代码]

当我建议“改变动画库”时，我的意思是更具体地说，使用一个开源社区，比如GSAP

但如果你想进入兔子洞，请从这里开始：

(function () {
  var follower, mouseX, mouseY, positionElement, timer;
  follower = document.getElementById('custom-cursor');
  console.log(follower);
  mouseX = event => { return event.clientX; };
  mouseY = event => {return event.clientY;};
  positionElement = event => {
    var mouse;
    mouse = {
      x: mouseX(event),
      y: mouseY(event),
    };

    follower.style.top = mouse.y + 'px';
    follower.style.left = mouse.x + 'px';
  };
  window.onmousemove = event => {
    if(!timer){timer = false;}
    var _event;
    _event = event;
    return timer = setTimeout(() => {
      return positionElement(_event);
    }, 5);
  };
}).call(this);

$(document).on('mousedown', function() {
  $('#custom-cursor, #imghover-cursor').addClass('clicking');
});
$(document).on('mouseup', function() {
  $('#custom-cursor, #imghover-cursor').removeClass('clicking');
});