SVG weird lines in safari

Does anyone know why does this SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 412" fill="none">
<path id="path1" d="M0 130L192 89L384 64L576 57L768 125L960 37L1152 99L1344 0L1536 124L1728 131L1920 36V412H1728H1536H1344H1152H960H768H576H384H192H0V130Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path2" d="M0 142L192 131L384 122L576 162L768 116L960 102L1152 176L1344 123L1536 186L1728 76L1920 103V412H1728H1536H1344H1152H960H768H576H384H192H0V142Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path3" d="M0 234L192 194L384 265L576 253L768 252L960 209L1152 218L1344 263L1536 200L1728 260L1920 223V412H1728H1536H1344H1152H960H768H576H384H192H0V234Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path4" d="M0 274L192 331L384 325L576 303L768 269L960 330L1152 310L1344 297L1536 308L1728 331L1920 320V412H1728H1536H1344H1152H960H768H576H384H192H0V274Z" fill="url(#paint0_linear_1186_28)"/>
<defs>
    <linearGradient id="paint0_linear_1186_28" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#FF00E5"/>
        <stop offset="1" stop-color="#00E0FF"/>
    </linearGradient>
</defs>
</svg>

Render with this line around the middle in safari?

Also when i tried to add morphing animation to it there were multiple lines appearing seemingly randomly and a lot. I'd appreciate any help regarding this. Thanks in advance.

Solution

The issue was resolved by updating safari from version 16.2 to 16.3. So the problem wasn't with the SVG but rather with webkit/safari.