Not all consecutively centered SVGs are grid fitted 
https://bugs.webkit.org/show_bug.cgi?id=248222
Summary Not all consecutively centered SVGs are grid fitted
tobfa
Reported 2022-11-22 06:29:37 PST
Created attachment 463663 [details] Comparison SVG grid fitting I am dealing with SVG images which may vary in terms of even/uneven whole pixel widths. They should be centered on the page above one another, and the expected result is that whole pixels are preserved, i.e. no color blending rendition. Since some are of even pixel widths, and vice versa, they cannot possible all be perfectly centered, but some should rather be nudged by the browser and aligned whole-pixel with the browser grid. I am attaching two test case SVGs containing a striped 4px and 5px pattern respectively, and the HTML code snippet is written below. Furthermore, I am attaching screenshots taken on a Mac (13.0.1, normal dpi) workstation depicting the output from Firefox (107.0), Google Chrome (107.0.5304.110), and Safari (16.1 [18614.2.9.1.12]), where the Firefox output is the preferred behavior. HTML CODE: ============= <!DOCTYPE html> <html> <body style="text-align: center;"> <div style="height: 8px;"> <img src="lines_4.svg" /> </div> <div style="height: 8px;"> <img src="lines_5.svg" /> </div> </body> </html>
Attachments
Comparison SVG grid fitting (14.85 KB, image/png)
2022-11-22 06:29 PST, tobfa 		no flags
Details
striped 4px pattern (1.07 KB, image/svg+xml)
2022-11-22 06:30 PST, tobfa 		no flags
Details
striped 5px pattern (1.26 KB, image/svg+xml)
2022-11-22 06:30 PST, tobfa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
tobfa
Comment 1 2022-11-22 06:30:17 PST
Created attachment 463664 [details] striped 4px pattern
tobfa
Comment 2 2022-11-22 06:30:45 PST
Created attachment 463665 [details] striped 5px pattern
Radar WebKit Bug Importer
Comment 3 2022-11-28 11:16:59 PST
<rdar://problem/102725779>
tobfa
Comment 4 2022-11-28 23:44:18 PST
I should add that you may have to constrain the container to reliably observe the phenomenon, e.g. as in <body style="text-align: center; width: 1000px;">
Note You need to log in before you can comment on or make changes to this bug.