https://svg-mask-resolution.glitch.me/ The above page displays three circles: 1. A normal black <ellipse> 2. A red <rect> with an <ellipse> set via mask="url(#myMask)" 3. Same as #2 but in front of a regular black <ellipse> On non high dpi displays, this page is the same in all browsers. But when viewed on a high dpi display, or when zooming in (either via pinch zoom or Cmd +/-) the masks are not rendered with the correct resolution. For the circle in the middle this can be seen by the jagged edges. The right circle suffers from the same issue, but here it is even worse because now the black edge around it is much more visible. Note that the black edge is also visible in other browsers, but in safari it is much more noticable due to this issue.
Created attachment 466013 [details] Safari iOS
Created attachment 466014 [details] Safari macOS
Created attachment 466015 [details] Chrome macOS
Created attachment 466016 [details] Firefox macOS
<rdar://problem/108615268>