Bug 258375 – Stroke is rendering the SVG with jagged edges

• Component: SVG
• Status: RESOLVED FIXED

Created attachment 466779 [details]
Reproduction in a minimal environment.

# Safari SVG jagged edges

## Reproduction

Check the attached file called `index.html`

## Description

The SVG keeps rendering with jagged edges. This does not happen in Firefox or Chrome.

## Steps to reproduce

1. Add `fill: white` to the SVG to make it easier to see the jagged edges
2. Add `stroke: black` to the SVG to make it easier to see the jagged edges
3. Add `width: 32px; height: 32px;` to the SVG, the smaller the size the more the edges become jagged

## Expected behavior

The SVG should have smooth edges.

## Actual behavior

The SVG does not have smooth edges, some sections of it show jagged areas.

## Other information

The SVG renders with smooth edges on Firefox and Chrome.

Created attachment 466780 [details]
Safari displaying jagged SVG

Created attachment 466781 [details]
Firefox displaying smooth SVG

Comment on attachment 466780 [details]
Safari displaying jagged SVG

I've added arrows to the location of the jagged edges.

Created attachment 466782 [details]
Chrome displaying smooth SVG

[Ahmad Saleem]

I am unable to reproduce this using Safari 16.5.1 using attached test case. Any specific condition or steps, I need to do?

I'm using Safari v16.5.0. There shouldn't be anything extra needed.

I can also reproduce it on Stackblitz through https://stackblitz.com/edit/web-platform-uu2cbv?file=index.html

Does the link help?

[Ahmad Saleem]

(In reply to maria from comment #6)
> I'm using Safari v16.5.0. There shouldn't be anything extra needed.
> 
> I can also reproduce it on Stackblitz through
> https://stackblitz.com/edit/web-platform-uu2cbv?file=index.html
> 
> Does the link help?

If I zoom in a lot and put focus then I see some smoothness issue on the outline but not similar to attached screenshots. :-(

Can you share your OS and machine details? Because I think macOS 13.2 (Ventura) also had some system level improvement to fix some SVG bugs. Also Apple Silicon or Intel might also be an issue.

I am using macOS 13.4.1 using Safari 16.5.1 on M1 Pro 38 GPU core to reproduce this issue.

I'm using macOS 13.4 with Safari 16.5.0 on M2 Max.

I updated the fill on the Stackblitz environment to mimic the screenshots.

Created attachment 466784 [details]
Video displaying the difference between Firefox and Safari

[Radar WebKit Bug Importer]

<rdar://problem/111478546>

[Liam DeBeasi]

This issue also reproduces on iOS. I am able to reproduce using the filled "airplane" or filled "people-circle" icons on ionicons.com.

I cannot reproduce this issue on iOS 15.6, but I can reproduce it on iOS 16.5 so this does appear to be a regression.

This appears to be resolved in iOS 17.4

I have verified that this was fixed in iOS 17.3.