Duplication of SVG text-paths on iOS/Safari - ios

Question

I have an SVG on my website that displays text along a path. This works everywhere except on iOS devices. Here the text is duplicated below the paths. See the image below for what I mean by "duplicated". Any idea on why Safari behaves strangely here? If you need more information about the code let me know. The tspans at the bottom simply have a string inside them
<g>
{/* Line connecting the start of the arc with the fairy icon */}
{index >= 5 && last && <line stroke='#fff' strokeWidth="2" x1={fairyPos?.[0]} y1={fairyPos?.[1]} x2={x} y2={y} />}
{/* Rotate the whole group by 90deg in order to initially hide it */}
<g className="-rotate-90" style={{ transform: `rotate(${rotation}deg)` }}>
{/* Gradient along the path */}
<defs>
<linearGradient id={`gradient${index}`}>
<stop offset="0%" stopColor={fairyGradient?.[0]} />
<stop offset="100%" stopColor={fairyGradient?.[1]} />
</linearGradient>
</defs>
{/* Border around the arc */}
<path id={`msg${index}`} d={arc} fill="none" stroke="#fff" strokeWidth={width} strokeLinecap="round" className="drop-shadow-[4px_4px_0_rgba(0,0,0,0.25)]" />
{/* Arc container of the message */}
<path d={arc} stroke={`url(#gradient${index})`} strokeWidth={width - 4} strokeLinecap="round" fill='none' />
{/* Circle at the start of the arc */}
<circle cx={arcStart[0]} cy={arcStart[1]} r={width / 2 - 1} fill={`url(#gradient${index})`} stroke="#fff" strokeWidth="2" />
{/* Text inside the arc */}
<text color="#446688" fontSize="12px" fontFamily="'Kiwi Maru'" className="text-outline-light">
<textPath startOffset={width / 2 - 1 + 5} xlinkHref={`#msg${index}`}>
<tspan x="0" alignmentBaseline={lines > 1 ? "before-edge" : "central"} dy={lines > 1 ? -(width / 2) + 4 : -1} >{text[0]}</tspan>
{text.length > 1 && text.slice(1).map((v, i) => <tspan key={index + '-' + i} x="0" alignmentBaseline="before-edge" dy="1em">{v}</tspan>)}
</textPath>
</text>
</g>
</g>

Answer 1

Figured it out after individually deleting every single property on my svg elements.
The problem was the className="text-outline-light" on the <text> element. The class was used for text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; and apparently Safari doesn't like it, if you define more than one shadow at once.
I deleted that class and used paintOrder="stroke" stroke="#fff" strokeWidth="1.5", which seems a bit better to use anyways.