javascript - 为什么我的 css3 动画在 chrome 和 edge 中如此错误？

Question

所以我一直在做一个网站，这是我第一次尝试网络开发。现在因为我通常使用 Firefox，所以我首先在 Firefox 上起草我的网站。现在我知道 Firefox 是 Gecko，Chrome 和 Edge 是 Webkit，因此它们之间可能存在一些差异。所有的动画和一切都在 Firefox 上表现得非常好——自定义光标、CSS 选框，几乎所有东西。我的代码写得那么糟糕，还是我做错了什么？

/*kinda laggy cursor control js */
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})

const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove', e => {
  cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})

const links = document.querySelectorAll('a')

links.forEach(link => {
  link.addEventListener('mouseenter', e => {
    cursor.classList.add('enlarged')
  })
  link.addEventListener('mouseout', e => {
    cursor.classList.remove('enlarged')
  })
})
const labels = document.querySelectorAll('label')
labels.forEach(label => {
  label.addEventListener('mouseenter', e => {
    cursor.classList.add('enlarged')
  })
  label.addEventListener('mouseout', e => {
    cursor.classList.remove('enlarged')
  })
})

.cursor {
  width: 25px;
  height: 25px;
  position: absolute;
  border: 2px solid rgb(83, 83, 83);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: 50ms;
  transition-timing-function: ease-out;
  mix-blend-mode: exclusion;
  z-index: 800;
  pointer-events: none;
  transition: color 100ms ease, top 50ms linear, left 50ms linear, width 500ms ease, height 500ms ease;
}

.cursor2 {
  z-index: 800;
  transition: 10ms;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgb(83, 83, 83);
  pointer-events: none;
  mix-blend-mode: difference;
  position: absolute;
}

body {
  overflow: hidden;
  font-size: 100%;
  height: 100vh;
  cursor: none;
}

<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>

上面的代码片段是一个自定义光标，我遵循这个随机的 Youtube 教程。教程中的那个人得到了一个非常不错的光标，他似乎甚至在使用 chrome，光标工作得很好。然而，当我在 chrome 中运行我的代码时，我得到了一个疯狂的延迟，光标只是在整个地方传送。任何和所有 :hover 过渡都非常突然，而在 Firefox 中它似乎工作得很好。

标签： javascripthtmlcss