Así que hice un cursor personalizado para mi próximo sitio web. En Chrome funciona como debería pero en Safari va lento...

He intentado varias cosas, como usar las cosas del webkit, pero todavía no funciona.

aquí está el 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%))` }