Safari SVG mask-image lines on responsive img when changing windows size

Question

I am using a a SVG image-mask on a responsive image. When I change window size, some strange white lines appear (only in Safari): https://www.loom.com/share/a1f43b501fab49d596da77e0721a4e21

I use this CSS code on the img:

            .big-image img {
            -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="2226" height="1745" viewBox="0 0 2226 1745" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2225.86 1744.2L94.7251 1436.7C33.917 1427.93 -7.91689 1371.05 1.82585 1310.39L212.208 0.500535L2225.86 0.500486L2225.86 1744.2Z" fill="%23000000"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg width="2226" height="1745" viewBox="0 0 2226 1745" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2225.86 1744.2L94.7251 1436.7C33.917 1427.93 -7.91689 1371.05 1.82585 1310.39L212.208 0.500535L2225.86 0.500486L2225.86 1744.2Z" fill="%23000000"/></svg>');
            -webkit-mask-size: cover;
            mask-size: cover;
        }