NEW 278326
SVG with fractional size/spacing displayed cropped 
https://bugs.webkit.org/show_bug.cgi?id=278326
Summary SVG with fractional size/spacing displayed cropped
Jeffery To
Reported 2024-08-19 10:58:41 PDT
Created attachment 472230 [details] Test case Under certain circumstances, an svg element/image is cropped whereas an img element with the same SVG image is displayed correctly. It seems the necessary circumstances in the attached test case are: 1. The height of the svg element is 14.98px instead of 15px. If the height is exactly 15px then the image is displayed correctly. I'm not sure if this is a separate issue, but with the span having a width of 19px, the bottom padding of the ::before pseudo-element (calc(100% * 15 / 19)) should be 15px instead of 14.98px. 2. The svg element if vertically offset by 0.5px. If the offset is an integer then the image is displayed correctly. In the attached test case this is done in two ways, one with align-items: center in a flex container, the other with a direct 0.5px top padding. I have tested this with Safari 17.6 (19618.3.11.11.5) on macOS Sonoma 14.6.1 (on an iMac, I believe on Apple Silicon). I would assume the issue exists in newer versions of Safari/WebKit.
Attachments
Test case (1.54 KB, text/html)
2024-08-19 10:58 PDT, Jeffery To 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jeffery To
Comment 1 2024-08-19 10:59:58 PDT
Chrome has the same issue (https://issues.chromium.org/issues/360846285). The SVG image is displayed correctly in Firefox.
Radar WebKit Bug Importer
Comment 2 2024-08-19 23:56:30 PDT
<rdar://problem/134322589>
Jeffery To
Comment 3 2024-08-21 03:25:14 PDT
I did some more testing and this issue also occurs on iPhone (iPhone 15, iOS 17.6.1) and iPad (iPad Pro 13-inch (M4), iPadOS 17.6.1).
Note You need to log in before you can comment on or make changes to this bug.