How to fix button animation on apple device - html

Question

The customer asked to apply the effect on the button. Link on CodePen:
On all browsers, the button is displayed correctly, except for Safari(macOS). On the "caniuse" site, safari supports all written CSS properties. Maybe I missed some properties of webkit etc? Can it be fixed? Tested on the latest version of safari 14.1.2 and macOS 10.14 Mojave.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix
in="blur"
type="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"
result="highContrastGraphic"
/>
<feComposite
in="SourceGraphic"
in2="highContrastGraphic"
operator="atop"
/>
</filter>
</defs>
</svg>
<button className={styles.gooeyButton}>
Button
<span id={styles.bubbles}>
<span id={styles.bubble}></span>
<span id={styles.bubble}></span>
<span id={styles.bubble}></span>
</span>
</button>
svg {
position: absolute;
top: -8000px;
left: -8000px;
}
button {
position: relative;
z-index: 1;
cursor: pointer;
filter: url("#gooey");
-webkit-filter: url("#gooey");
#bubbles {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
#bubble {
background-color: $green;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
z-index: -1;
#for $bubble from 1 through 10 {
&:nth-child(#{$bubble}) {
width: 25px;
height: 25px;
left: (random(90) + 10) + px;
animation: move-#{$bubble} #{5 + $bubble * 0.02}s infinite;
animation-delay: #{$bubble * 0.2}s;
}
}
#for $bubble from 1 through 10 {
#keyframes move-#{$bubble} {
0% {
transform: translate(0, 0);
}
99% {
transform: translate(0, -(random(80) + 50) + px);
}
100% {
transform: translate(0, 0);
opacity: 0;
}
}
}
}
}
}