Safari-CSS变换：缩放（）像素化动画

我正在创建一个跟随指针的自定义光标。这就是我迄今为止所取得的成就：

（另附代码如下）

问题在于狩猎。单击菜单图标时，它会在转换期间对缩放的光标图像进行像素化。 之前相同的问题也发生在hover上，我通过添加

transform:translateZ（0）修复了这个问题在
正文上

我应该如何解决此问题

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


提前谢谢


const$bigBall=document.querySelector（'.cursor\u ball--big'）；
const$hoverables=document.querySelectorAll（'.hoverable'）；
//听众
document.body.addEventListener（'mousemove'，onMouseMove）；
对于（设i=0；i<$hoverables.length；i++）{
$hoverables[i].addEventListener（'mouseenter'，onmousehaver）；
$hoverables[i].addEventListener（'mouseleave'，onmousehorveout）；
}
//移动光标
移动鼠标的功能（e）{
TweenMax.至（$bigBall，0{
x:e.pageX-15，
y:e.pageY-15
})
}
//悬停元素
函数onmousehaver（）{
TweenMax.至（$bigBall，.3）{
比例：4，
force3D：错误
})
}
函数onMouseHoverOut（）{
TweenMax.至（$bigBall，.3）{
比例：1，
force3D：错误
})
}
功能切换（id）{
var x=document.getElementById（id）；
如果（x.className==“打开可悬停”）x.className=“可悬停”；
else x.className=“打开可悬停”；
}
正文{
变换：translateZ（0）；
}
.光标{
指针事件：无；
}
.光标球{
位置：固定；
排名：0；
左：0；
混合模式：差异化；
z指数：1000；
}
.光标\球圆{
填充：#f7f8fa；
}
.对{
光标：无；
保证金：0；
显示器：flex；
高度：100vh；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
背景：#fff；
}
.对{
边框底部：2倍实心#000；
颜色：#000；
边缘底部：20px；
}
#导航icon4{
宽度：60px；
高度：45px；
位置：相对位置；
/*光标：指针*/
}
#导航图标4跨度{
显示：块；
位置：绝对位置；
高度：9px；
宽度：100%；
背景：#d3531a；
边界半径：9px；
不透明度：1；
左：0；
转换：.25秒轻松输入输出；
}
#导航图标4跨度：第n个子（1）{
顶部：0px；
变换原点：左中心；
}
#导航图标4跨度：第n个子（2）{
顶部：18px；
变换原点：左中心；
}
#导航图标4跨度：第n个子（3）{
顶部：36px；
变换原点：左中心；
}
#导航图标4.开放跨距：第n个子（1）{
变换：旋转（45度）；
顶部：-3px；
左：8px；
}
#导航图标4.开放跨距：第n个子（2）{
宽度：0%；
不透明度：0；
}
#导航图标4.开放跨距：第n个子（3）{
变换：旋转（-45度）；
顶部：39px；
左：8px；
}
一种解决方案是直接缩放svg，如下所示：


const$bigBall=document.querySelector（'.cursor\u ball--big'）；
const$svgitem=document.getElementById（“svgitem”）
const$hoverables=document.querySelectorAll（'.hoverable'）；
//听众
document.body.addEventListener（'mousemove'，onMouseMove）；
对于（设i=0；i<$hoverables.length；i++）{
$hoverables[i].addEventListener（'mouseenter'，onmousehaver）；
$hoverables[i].addEventListener（'mouseleave'，onmousehorveout）；
}
//移动光标
移动鼠标的功能（e）{
TweenMax.至（$bigBall，0{
x:e.pageX-15，
y:e.pageY-15，
})
}
//悬停元素
函数onmousehaver（）{
TweenMax.至（$svgitem，.3）{
比例：10，
force3D：错误
})
}
函数onMouseHoverOut（）{
TweenMax.至（$svgitem，.3）{
比例：1，
force3D：错误
})
}
功能切换（id）{
var x=document.getElementById（id）；
如果（x.className==“打开可悬停”）x.className=“可悬停”；
else x.className=“打开可悬停”；
}
正文{
变换：translateZ（0）；
}
.光标{
指针事件：无；
}
.光标球{
位置：固定；
排名：0；
左：0；
混合模式：差异化；
z指数：1000；
}
.光标\球圆{
填充：#f7f8fa；
}
.对{
光标：无；
保证金：0；
显示器：flex；
高度：100vh；
宽度：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
背景：#fff；
}
.对{
边框底部：2倍实心#000；
颜色：#000；
边缘底部：20px；
}
#导航icon4{
宽度：60px；
高度：45px；
位置：相对位置；
/*光标：指针*/
}
#导航图标4跨度{
显示：块；
位置：绝对位置；
高度：9px；
宽度：100%；
背景：#d3531a；
边界半径：9px；
不透明度：1；
左：0；
转换：.25秒轻松输入输出；
}
#导航图标4跨度：第n个子（1）{
顶部：0px；
变换原点：左中心；
}
#导航图标4跨度：第n个子（2）{
顶部：18px；
变换原点：左中心；
}
#导航图标4跨度：第n个子（3）{
顶部：36px；
变换原点：左中心；
}
#导航图标4.开放跨距：第n个子（1）{
变换：旋转（45度）；
顶部：-3px；
左：8px；
}
#导航图标4.开放跨距：第n个子（2）{
宽度：0%；
不透明度：0；
}
#导航图标4.开放跨距：第n个子（3）{
变换：旋转（-45度）；
顶部：39px；
左：8px；
}
有趣的是，如果我像这样抓住svg元素的直接上下文，它就不起作用了
const$bigBall=document.querySelector（'.cursor\uu ball--big svg'）