| Summary: | Stroke is rendering the SVG with jagged edges | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | maria | ||||||||||||
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||||||||||
| Status: | RESOLVED FIXED | ||||||||||||||
| Severity: | Normal | CC: | ahmad.saleem792, alex, heycam, karlcow, ldebeasi, sabouhallawa, webkit-bug-importer, zimmermann | ||||||||||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||||||||||
| Version: | Safari 16 | ||||||||||||||
| Hardware: | Unspecified | ||||||||||||||
| OS: | macOS 13 | ||||||||||||||
| Attachments: |
|
||||||||||||||
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
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. |
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.