Почему мои анимации 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, я получаю безумную степень задержки, когда курсор просто телепортируется повсюду. Любое и все: переходы при наведении мыши невероятно резкие, тогда как в Firefox он, кажется, работает совершенно нормально.