javascript - Performance issues, only in Safari

Question

Last night I wrote a script for a custom-cursor, here's a fiddle: https://jsfiddle.net/drgm2yoL/

I remember testing it in Safari, and everything was smooth, but when I looked at it again, today, I had severe performance issues in Safari, I also tested Opera, Chrome and Firefox and the custom-cursor moves super smoothly, but in Safari it jerks around.

The custom-cursor consists of two elements, following the mouse-cursor-position, on of them has this CSS-property: transition: all .1s ease-out – For whatever reason, Safari can't handle this…

Following now, is all the code, but feel free to play around with the fiddle.

var cursor = document.querySelector(".cursor");
var cursor2 = document.querySelector(".cursor_2");

var detectIfCursorStatic = undefined;

window.addEventListener('mousemove', function(e) {
  // Chain "cursor" and "cursor2" to mouse-position. START
  cursor.style.top = e.y + "px";
  cursor.style.left = e.x + "px";

  cursor2.style.top = e.y + "px";
  cursor2.style.left = e.x + "px";
  // Chain "cursor" and "cursor2" to mouse-position. END

  cursor.style.display = "block";
  cursor2.style.display = "block";

  cursor2.style.transform = "translate(-50%, -50%) scale(1)";

  // Change cursor2, when mouse sits still. START
  clearTimeout(detectIfCursorStatic);
  detectIfCursorStatic = setTimeout(function() {

    cursor2.style.transform = "translate(-50%, -50%) scale(1.3)";
    setTimeout(function() {
      cursor2.style.transform = "translate(-50%, -50%) scale(0)";
    }, 200);

  }, 500);
  // Change cursor2, when mouse sits still. END
});

// Make it, so that when the cursor leaves the viewport, "cursor" and "cursor2" instantly disappear, but when entering the viewport, they blend in. START
document.addEventListener('mouseout', function() {
  cursor.style.opacity = "0";
  cursor2.style.opacity = "0";

  setTimeout(function() {
    cursor.style.transition = "opacity .5s linear"
  }, 500);
});

document.addEventListener('mouseover', function() {
  cursor.style.opacity = "1";
  cursor2.style.opacity = ".3";

  setTimeout(function() {
    cursor.style.transition = "opacity 0s linear"
  }, 500);
});
// … END

// Make it, so that, when the cursor is hovering over an object, with the class: "cursorInteraction", "cursor" and "cursor2" change colour. START
var cursorInteractionObjects = document.querySelectorAll(".cursorInteraction");

cursorInteractionObjects.forEach(function(element) {
  element.addEventListener('mouseenter', function() {
    cursor.style.backgroundColor = "black";
    cursor2.style.backgroundColor = "black";
    cursor2.style.opacity = ".2";
  });

  element.addEventListener('mouseleave', function() {
    cursor.style.backgroundColor = "white";
    cursor2.style.backgroundColor = "white";
    cursor2.style.opacity = ".3";
  });
});
// … END

// Example: The custom-cursor is white, it is moved over an object, with the class: "cursorInteraction" and a background-color, of: white, the custom-cursor changes to black. – Inside the object, that the cursor is currently in, there is another object, a button, with: "background-color: black", on :hover, so the custom-cursor has to change again, in this case the custom-cursor will change in such a way, that it is no longer visible. – Such buttons, are assigned the following class: "cursorInteraction_Negative".
var cursorInteractionObjects_Negative = document.querySelectorAll(".cursorInteraction_Negative");

cursorInteractionObjects_Negative.forEach(function(element) {
  element.addEventListener('mouseenter', function() {
    cursor.style.opacity = "0";
    cursor2.style.zIndex = "-1";
  });

  element.addEventListener('mouseleave', function() {
    cursor.style.opacity = "1";
    cursor2.style.zIndex = "0";
  });
});

@charset "UTF-8";

/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  cursor: none;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: white;
}

body {
  background-color: black;
}

body,
html {
  height: 100%;
  /* <- Firefox needs this. – This might not be necessary in the final website, because there will be objects spanning the whole viewport. */
}

.test_div {
  background-color: white;
  position: fixed;
  width: 400px;
  height: 200px;
  margin: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.test_button {
  border: 1px solid black;
  height: 50px;
  width: 150px;
  line-height: 50px;
  text-align: center;
  font-family: proxima-nova, sans-serif;
}

.test_button:hover {
  background-color: black;
}


/* Custom Cursor START */

.cursor {
  z-index: 10;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: white;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
}

.cursor_2 {
  z-index: 9;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: white;
  opacity: .3;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  transition: all .1s ease-out;
}

<div class="test_div cursorInteraction">
  <a href="" class="test_button cursorInteraction_Negative"> Test Link </a>
</div>
<div class="cursor"></div>
<div class="cursor_2"></div>

question from:https://stackoverflow.com/questions/65647051/performance-issues-only-in-safari

Answer 1

Waitting for answers