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

Question

这是很难解释的，所以我做了一个密码。尝试在Chrome和Safari中打开它，然后单击codepen来查看差异：https://codepen.io/matt_o_tron_5000/pen/gOMaKmY

基本上，在一些javascript的帮助下，我们在光标后面有一个点。CSS动画使它在任何时候都会慢慢地生长/收缩，当你点击这个点时，它就会发生实质性的收缩。

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

知道如何在Safari中修复这种行为吗？

显然，我不能发布这个，除非我的代码链接是“伴随代码”。这是一些代码。

// HTML

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

// CSS

#custom-cursor {
  position: fixed;
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: red;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition: 0.1s ease-out;
  transition-property: width, height, transform;
  animation: growshrink 4s infinite;

  &.clicking {
    width: 1rem;
    height: 1rem;
  }
}

@keyframes growshrink {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  50% {
    transform: translate3d(-50%, -50%, 0) scale(1.3);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
}

// 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');
});

Answer 1

浏览器呈现代码的方式不同..。我们可以更新它的代码，这样它的行为就像项目“受支持的浏览器”一样，或者使用用户代理嗅探方式/每种浏览器类型的方法--我不建议这样做，我从来不这样做，因为选项1几乎总是有一种方法来实现它，它更简单、更干净，并且更容易更改您使用和/或调整现有代码的库。

当我建议“修改动画库”时，我的意思是更具体地使用一个开源社区--像GSAP这样经过审查的社区。https://greensock.com/gsap/

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

https://github.com/WhichBrowser/Parser-PHP