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
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?
(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
<rdar://problem/111478546>
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.