So I've made a custom cursor for my next website. In Chrome it works as it should but in Safari it's laggy...

I've tried several things like using the webkit stuff but it still doesn't work.

here is the Codepen

html

<div class="cursor"></div>

css

body{
  background: #fff;
  width: 100%;
  height: 100vh;
}
.cursor{
    position: fixed;
    left: 0px;
    top: 0;
    width: 25px;
    height: 25px;

    transition-duration:0.3s;
    -webkit-transition-duration:0.3s;
    -ms-transition-duration:0.3s;
    -moz-transition-duration:0.3s;

    transition-timing-function: cubic-bezier(.33,.81,.66,.95);
    -webkit-transition-timing-function: cubic-bezier(.33,.81,.66,.95);
    -moz-transition-timing-function: cubic-bezier(.33,.81,.66,.95);
    background-color: #fff;
    mix-blend-mode: difference;
    border-radius: 50%;
    pointer-events: none;
}

js

let cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', moveCursor);

function moveCursor(e) {
    let x = e.clientX;
    let y = e.clientY;

    cursor.style.transform = `translate(calc(${x}px - 50%), calc(${y}px - 50%))`
}