I found a rendering issue with Safari browser (both Mac and iPhone) with the following SVG file.
<?xml version="1.0" encoding="UTF-8" ?>
<svg
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs>
<g id="nouns12">
<rect width="128" height="128" x="0" y="0" fill="blue" />
<rect width="128" height="128" x="128" y="128" fill="blue" />
<rect width="128" height="128" x="256" y="256" fill="blue" />
<rect width="128" height="128" x="384" y="384" fill="blue" />
<rect width="128" height="128" x="512" y="512" fill="blue" />
<rect width="128" height="128" x="640" y="640" fill="blue" />
<rect width="128" height="128" x="768" y="768" fill="blue" />
<rect width="128" height="128" x="896" y="896" fill="blue" />
</g>
<pattern id="Pattern" x="0" y="0" width="0.03125" height=".03125">
<rect width="32" height="32" fill="black" />
<circle cx="16" cy="16" r="16" fill="white"/>
</pattern>
<mask id="dotMask">
<rect fill="url(#Pattern)" stroke="black" width="1024" height="1024" />
</mask>
</defs>
<use href="#nouns12" mask="url(#dotMask)"/>
</svg>
Chrome, Edge and Brave (on Mac) this SVG perfectly, but Safari renders a little bit incorrectly (see below), which seems like a bug.
I'm looking for a work around, and I'd really appreciate any suggestions. By the way, I have already tried SVG filters instead of mask, and the result was worse. Note: I am not able to change the definition of "nouns12", because it is coming from outside.
