пользовательский курсор с использованием querySelector задерживается в сафари

Question

Я следовал этому руководству , чтобы иметь форму, которая следует за моим курсором, это отлично работает и плавно работает в Chrome и Firefox, но по какой-то причине в Safari это сильно отстает.

Вот предварительный просмотр Imgur того, как выглядят два браузера https://imgur.com/a/5XN0Dlt

Мой javascript код

<script>
            const cursor = document.querySelector('.cursor');

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

        document.addEventListener('click', () => {
            cursor.classList.add("expand");

            setTimeout(() => {
                cursor.classList.remove("expand");
            }, 500)
        })
</script>

Мой CSS

    .cursor {
    width: 25px;
    height: 25px;
    border: 3px solid #00AEC8;
    border-radius: 50%;
    position: absolute;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    animation: cursorAnim .5s infinite alternate;
    pointer-events: none;
}

Я также готов отключить анимацию курсора в Safari, если это возможно и проще.