Bug 255734 - Svg masks are rendered with the wrong resolution
Summary: Svg masks are rendered with the wrong resolution
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 16
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-04-20 10:13 PDT by Jesper van den Ende
Modified: 2023-04-27 10:14 PDT (History)
6 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Jesper van den Ende 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.
Comment 1 Jesper van den Ende 2023-04-20 10:13:58 PDT
Created attachment 466013 [details]
Safari iOS
Comment 2 Jesper van den Ende 2023-04-20 10:14:19 PDT
Created attachment 466014 [details]
Safari macOS
Comment 3 Jesper van den Ende 2023-04-20 10:14:32 PDT
Created attachment 466015 [details]
Chrome macOS
Comment 4 Jesper van den Ende 2023-04-20 10:14:48 PDT
Created attachment 466016 [details]
Firefox macOS
Comment 5 Radar WebKit Bug Importer 2023-04-27 10:14:21 PDT
<rdar://problem/108615268>