Reddit logo top pixel cut off
Categories
(Core :: SVG, defect, P3)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox67 | --- | affected |
People
(Reporter: ke5trel, Unassigned)
References
()
Details
(Keywords: testcase)
Attachments
(2 files)
Reduced testcase screenshot
Go to https://new.reddit.com and look at the main orange circular logo in the top left corner and note the top edge is cut off by 1 pixel.
Reduced test case requires an SVG in a flex element with center alignment and a top or bottom border of uneven size (1px, 3px, 5px etc) (similar to Bug 1533292) which causes the SVG to move up by 1px and get cut off. Visible at zoom levels 50%, 100%, 150% and 300%.
Reproducible going back to FF37.
|
||
Comment 2•5 years ago
|
||
Daniel, is this something you could look at? Probably not high priority, but does have a combination of flex and SVG sizing.
|
|
||
Comment 3•5 years ago
|
||
The reduced test requires a 1dppx display.
|
||
Comment 4•5 years ago
|
||
I think this is a dupe of a long-standing bug that happens whenever we have non-pixel-aligned SVG content... (I don't have the bug number handy at the moment though)
(I see this all the time with icons at GitHub, too, BTW)
|
|
||
Comment 5•5 years ago
|
||
Bug 608812, I wanna say.
|
|
||
Comment 6•5 years ago
|
||
Yeah, I can reproduce this without flexbox (on a 1dppx display) by putting "margin-top: 0.5px" on the outer svg element.
This is indeed a version of bug 608812. In the testcase here, the fractional pixel here comes from the fact that we've got an odd amount of packing space (the heights are all even, and then there's 1px of border-bottom, which leaves behind an odd number of packing-space pixels). And then we distribute that odd packing space using "center" which gives us a half-pixel amount on top and bottom. And this should all be fine, except that bug 608812 means this causes issues if the thing at a half-pixel offset is SVG.
Description
•