custom cursor using querySelector lags in safari

I followed this tutorial to have a shape that follows my cursor, this works great and runs smoothly in Chrome and Firefox but for some reason, in Safari it lags a lot.

Here is an Imgur preview of what the two browsers look like https://imgur.com/a/5XN0Dlt

My javascript code

<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>

My 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;
}

I am also willing to disable the cursor animation within Safari if that's possible and easier.