Transition is not working properly in Safari-CodePudding

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

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%))`
}

CodePudding user response：

I've had nothing but trouble with dynamic transform values in safari. It seems they calculate positions in the window space a little different than other browsers. No source on that one, just my own trials and tribulations.

I would suggest you change your approach, and use top and left values.

I tested this in safari and it's miles more responsive.

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

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

  cursor.style.top = `${y}px`
  cursor.style.left = `${x}px`
}

body {
  background: #fff;
  width: 100%;
  height: 100vh;
}

.cursor {
  position: fixed;
  left: 0px;
  top: 0;
  width: 25px;
  height: 25px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.33, .81, .66, .95);
  background-color: #fff;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

<div ></div>

I kept the translate(-50%, -50%) as a permanent value on the cursor, and only updated top and left with javascript.

As a side note, the vendor prefixes are not really necessary for those properties. No need to add them. https://caniuse.com/css-transitions

CodePudding user response：

The translate calc in you js is forcing the cursor to the center.

The transition delay is too long preventing it for following the cursor.

Codepen: https://codepen.io/diomedefan/pen/RwMaYWe

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), calc(${y}px))`
}

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

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

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

<div ></div>