NEW 255734
Svg masks are rendered with the wrong resolution 
https://bugs.webkit.org/show_bug.cgi?id=255734
Summary Svg masks are rendered with the wrong resolution
Jesper van den Ende
Reported 2023-04-20 10:13:06 PDT
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.
Attachments
Safari iOS (508.49 KB, image/png)
2023-04-20 10:13 PDT, Jesper van den Ende 		no flags
Details
Safari macOS (419.16 KB, image/png)
2023-04-20 10:14 PDT, Jesper van den Ende 		no flags
Details
Chrome macOS (319.89 KB, image/png)
2023-04-20 10:14 PDT, Jesper van den Ende 		no flags
Details
Firefox macOS (419.16 KB, image/png)
2023-04-20 10:14 PDT, Jesper van den Ende 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jesper van den Ende
Comment 1 2023-04-20 10:13:58 PDT
Created attachment 466013 [details] Safari iOS
Jesper van den Ende
Comment 2 2023-04-20 10:14:19 PDT
Created attachment 466014 [details] Safari macOS
Jesper van den Ende
Comment 3 2023-04-20 10:14:32 PDT
Created attachment 466015 [details] Chrome macOS
Jesper van den Ende
Comment 4 2023-04-20 10:14:48 PDT
Created attachment 466016 [details] Firefox macOS
Radar WebKit Bug Importer
Comment 5 2023-04-27 10:14:21 PDT
<rdar://problem/108615268>
Note You need to log in before you can comment on or make changes to this bug.