GSAP, animation with translateX/Y, macOS Safari <= 13 version - animation

Question

I have this scene with animation, also I have an issue with Safari v.13(and lower) and glitching blurred balls (.intro-circle) in my scene.
So, when I open my scene on Safari v.13 and lower, my blurred balls very sad, and I don't know how can I solve this issue.
Thanks a lot in advance!
This is my pen
html:
<section class="intro">
<img class="intro-circle js_image intro-circle--yellow"
src="https://studiogalo.dev.cheitgroup.com/wp-content/themes/studio-galo/assets/img/intro/intro-circle-yellow.svg" alt="">
<img class="intro-circle js_image intro-circle--blue"
src="https://studiogalo.dev.cheitgroup.com/wp-content/themes/studio-galo/assets/img/intro/intro-circle-blue.svg" alt="">
<h1 class="intro-title">Welcome to <br>Paradise</h1>
<h2 class="intro-sub_title">We empower dreamers <br>who dare to make a difference.</h2>
</section>
css:
.intro {
position: fixed;
background-color: #F6F5F0;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1500;
visibility: visible; }
.intro-bg {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(1.001);
-ms-transform: scale(1.001);
transform: scale(1.001); }
.intro-bg--mobile {
display: none; }
.intro.animationEnd {
-webkit-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
opacity: 0;
visibility: hidden;
pointer-events: none; }
.intro-title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 3.05vw;
text-align: center;
font-weight: 300;
opacity: 0;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.intro-sub_title {
position: absolute;
left: 4.86vw;
top: 4.16vw;
font-size: 3.05vw;
text-align: left;
line-height: 1.1;
font-weight: 300;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.intro-circle {
position: absolute;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
will-change: transform; }
.intro-circle--yellow {
left: -3.75%;
top: -22.03%;
width: 48.61vw;
height: 48.61vw; }
.intro-circle--blue {
left: -18.75%;
top: 25.97%;
width: 54.16vw;
height: 54.16vw;
opacity: 0; }
.intro-circle--mobile {
display: none; }
js:
introAnimationStart()
function clearEntrance() {
$('.intro').addClass('animationEnd');
$('.site-wrapper, .header, body').addClass('load');
canMoveOn = true;
setTimeout(() => {
$('.intro').remove();
}, 1000);
}
function introAnimationStart() {
// /* intro animation GSAP */
window.history.scrollRestoration = 'manual';
window.scrollTo(0,0);
if (window.innerWidth >= 992) {
let introAnim = gsap.timeline({
defaults: {
duration: 1,
},
ease: Power1.easeInOut,
onComplete: function onComplete() {
// setTimeout(clearEntrance, 1000);
}
});
introAnim
.to(".intro-circle--yellow", {
delay: 1,
top: '-20%',
left: '70%',
}, 'subtitleAndYellow2')
.to(".intro-sub_title", {
delay: 1,
opacity: 0
}, 'subtitleAndYellow2')
.to(".intro-circle--blue", {
opacity: 1,
})
.to(".intro-circle--yellow", {
duration: 1.5,
left: '50%',
top: '50%',
translateX: '-50%',
translateY: '-50%',
}, 'YellowBlueTitle')
.to(".intro-circle--blue", {
duration: 1.5,
left: '50%',
top: '50%',
translateX: '-50%',
translateY: '-50%',
}, 'YellowBlueTitle')
.to(".intro-title", {
duration: 1.5,
opacity: 1,
}, 'YellowBlueTitle');
$('.intro').click(function () {
introAnim.timeScale(14);
});
} else {
/**
* Mobile animation-OPTIMIZATION
*/
// 1st step
setTimeout(() => {
$(".intro-circle--yellow, .intro-sub_title").addClass('fst_step');
}, 1000);
// 2nd step
setTimeout(() => {
$(".intro-circle--blue").addClass('snd_step');
}, 2200);
// 3rd step
setTimeout(() => {
$(".intro-circle--yellow, .intro-circle--blue, .intro-title").addClass('trd_step');
}, 3000);
setTimeout(clearEntrance, 6000);
}
}