Bug 282135 – REGRESSION: On Safari 18 macOS Sequoia SVGs render with artifacts around the edges on non-retina screens

• Status: NEW
• Component: SVG

On Safari 18 macOS Sequoia 15.0.1 SVG rendering at certain sizes creates undesired artifacts around the edges of elements.

For a reproduction visit the following CodePen: https://codepen.io/rlueder/pen/poMpwjr

On Chrome/Firefox the rendering looks as expected (no artifacts), on Safari/WebKit the first two instances of the SVG have artifacts around the edges.

Artifacts are also present on Safari Technology Preview 206.

Expected: Rendering should be the same across all browser engines.

Thank you!

I also just realized that the artifacts only happen on my external monitor (LG 34UC80-B QHD 3440x1440), on my 14" Macbook Pro (Nov 2023) the artifacts do not show. I have reports from other team members of the artifacts so perhaps related to non-retina screens.

[Alexey Proskuryakov]

Thank you for the report! Could you please clarify if this is a new issue in macOS Sequoia, or if this was happening before it, too?

Alexey Proskuryakov, thanks for quick response. I just upgraded from Sonoma 14.4  to Sequoia, I did not see the artifacts when on Sonoma.

[Radar WebKit Bug Importer]

<rdar://problem/138789037>

[Karl Dubost]

Created attachment 473181 [details]
rendering in safari, firefox, chrome

Thanks for the bug. 
This is a screenshot on a non retina screen of the 3 browsers. 
I don't see any obvious differences. 

rlueder, could you post a screenshot of what you are seeing. 

Safari Technology Preview  206           20621.1.3.21.1
Firefox Nightly            134.0a1       13424.11.7
Google Chrome Canary       132.0.6825.0  6825.0

[Karl Dubost]

So I guess we could close the bug given what was said

Sonoma 14.4: FAIL
Sequoia:     PASS

Created attachment 473186 [details]
Comparison of SVG rendering in different browsers

Karl Dubost,

Thanks for looking into it, attaching comparison similar to yours, top to bottom, Brave, Firefox and Safari, I def. see the artifacts ("spiky edges") on Safari.

I'm on latest versions of Brave and Firefox and on Safari 18.0.1 (Sequoia 15.0.1)