Safari - CSS transform: scale() pixelate with animation

Question

I am creating a custom cursor that follows the pointer. This is what I have achieved so far: https://jsfiddle.net/nx49y0ju/

(Also attaching code below)

Problem is with Safari. It pixelates the scaled cursor image during transition when menu icon is clicked. Earlier same issue was happening on hover, which I fixed by adding transform: translateZ(0); on body

What should I do to fix this issue?

Safari: Version 14.0.3 (16610.4.3.1.7)
macOS: Big Sur Version 11.2.3

Thanks in advance.

const $bigBall = document.querySelector('.cursor__ball--big');

const $hoverables = document.querySelectorAll('.hoverable');

// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
  $hoverables[i].addEventListener('mouseenter', onMouseHover);
  $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// Move the cursor
function onMouseMove(e) {
  TweenMax.to($bigBall, 0, {
    x: e.pageX - 15,
    y: e.pageY - 15
  })
}

// Hover an element
function onMouseHover() {
  TweenMax.to($bigBall, .3, {
    scale: 4,
    force3D: false
  })
}

function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1,
    force3D: false
  })
}

function toggle(id) {
  var x = document.getElementById(id);
  if (x.className == "open hoverable") x.className = "hoverable";
  else x.className = "open hoverable";
}

body {
    transform: translateZ(0);
}
.cursor {
     pointer-events: none;
}
 .cursor__ball {
     position: fixed;
     top: 0;
     left: 0;
     mix-blend-mode: difference;
     z-index: 1000;
}
 .cursor__ball circle {
     fill: #f7f8fa;
}
 .right {
     cursor: none;
     margin: 0;
     display: flex;
     height: 100vh;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: #fff;
}
 .right a {
     border-bottom: 2px solid #000;
     color: #000;
     margin-bottom: 20px;
}
 


#nav-icon4 {
  width: 60px;
  height: 45px;
  position: relative;
  /* cursor: pointer; */
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #d3531a;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transition: .25s ease-in-out;
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 18px;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 36px;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="right">
  <!-- <a class="hoverable">Hover me</a> -->

  <div id="nav-icon4" class="hoverable" onclick="toggle('nav-icon4')">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>
</div>

Answer 1

One solution is to directly scale the svg, like this:

const $bigBall = document.querySelector('.cursor__ball--big');
const $svgitem = document.getElementById("svgitem")

const $hoverables = document.querySelectorAll('.hoverable');

// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
  $hoverables[i].addEventListener('mouseenter', onMouseHover);
  $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// Move the cursor
function onMouseMove(e) {
  TweenMax.to($bigBall, 0, {
    x: e.pageX - 15,
    y: e.pageY - 15,
  })
}

// Hover an element
function onMouseHover() {
  TweenMax.to($svgitem, .3, {
    scale: 10,
    force3D:false
  
  })
}

function onMouseHoverOut() {
  TweenMax.to($svgitem, .3, {
    scale: 1,
    force3D:false
    
  })
}

function toggle(id) {
  var x = document.getElementById(id);
  if (x.className == "open hoverable") x.className = "hoverable";
  else x.className = "open hoverable";
}

body {
    transform: translateZ(0);
}
.cursor {
     pointer-events: none;
}
 .cursor__ball {
     position: fixed;
     top: 0;
     left: 0;
     mix-blend-mode: difference;
     z-index: 1000;
}
 .cursor__ball circle {
     fill: #f7f8fa;
}
 .right {
     cursor: none;
     margin: 0;
     display: flex;
     height: 100vh;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: #fff;
}
 .right a {
     border-bottom: 2px solid #000;
     color: #000;
     margin-bottom: 20px;
}
 


#nav-icon4 {
  width: 60px;
  height: 45px;
  position: relative;
  /* cursor: pointer; */
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #d3531a;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transition: .25s ease-in-out;
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 18px;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 36px;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="right">
  <!-- <a class="hoverable">Hover meh</a> -->

  <div id="nav-icon4" class="hoverable" onclick="toggle('nav-icon4')">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg id="svgitem" height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>
</div>