| Summary: | SVGs are sometimes offset by 0.5px on retina | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Jonas Munk <jonasmunk> | ||||
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, rniwa, sabouhallawa, webkit-bug-importer, zalan, zimmermann | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | WebKit Nightly Build | ||||||
| Hardware: | Mac | ||||||
| OS: | OS X 10.10 | ||||||
| Attachments: |
|
||||||
I see now that the problem occurs because of the margins on the headers resulting in a vertical position that does not land on a whole pixel. But I would still expect that the SVGs are drawn from a full pixel. I am able to reproduce this bug in Safari 15.5 and Safari TP 148 on macOS 12.4. The first SVG have top border finer (thinner) than other borders. All other browsers (Chrome Canary 105 and Firefox Nightly 104) render it fine. Thanks! Confirmed. |
Created attachment 286365 [details] Minimal test case Sometimes SVGs are offset by .5 pixels when drawn on retina screen. It looks like it happens randomly based on some vertical pixel-fitting. I would expect the coordinate system for the SVG to start at a full pixel based on the container. This is especially a problem when doing pixel-perfect/pixel-fitted icons for UI - not normally noticeable. I have created a perfect 32x32 square SVG to test with (hopefully) + an example using xlink In the attached test case: 1) The SVGs are drawn showing the problem where the top line in the rect is clipped 2) An image showing how Chrome draws it 3) An image showing how I see it on my machine with Webkit nightly 4) The same SVGs again - but now it draws correctly (probably because the content above makes it land on a full pixel or something) Note it looks like Firefox has a problem with the first SVGs but only on low DPI screen.