Border of 1px is not visible in Print preview on a low-res display
Categories
(Core :: Print Preview, defect)
Tracking
()
People
(Reporter: 123survesh, Unassigned)
Details
Attachments
(2 files)
1px_border_not_visible_firefox_v92.png
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:92.0) Gecko/20100101 Firefox/92.0
Steps to reproduce:
- Created a table with HTML and added a border to the table, its td and th elements with CSS of 1px.
- Created a Div with HTML and added a border with CSS of 1px.
- Opened print preview panel by pressing Ctrl+p.
Actual results:
The borders of the div, table, td and th elements were not visible in the print preview. But they are there when printed to a pdf.
On testing with a 2px border I was able to see the border in the print preview.
Expected results:
The border of 1px should be visible in the print preview panel for the div, table, td and th elements.
Discrimination against 1px borders must be avoided :)
p.s. I tested only 2 HTML elements, But think this applies to all HTML elements. Also When testing the same in Chromium, I didn't face this issue. Please Check. Thanks.
|
Reporter | |
Comment 1•4 years ago
|
||
This image is a screen shot from Chromium web browser, with desired the output for this issue.
|
||
Comment 2•4 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Print Preview' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Comment 3•4 years ago
|
||
Could you attach a test-case here? It might be specific to border-collapsed tables or such, or just an artifact of how we do the border pixel snapping. The border should definitely show up in the generated PDF.
|
||
Comment 4•4 years ago
|
||
It's about pixel snapping, I think; certainly not limited to b-c tables, or tables at all.
I can reproduce on macOS by just setting border: 1px solid red on a paragraph right here in a bugzilla comment, for example, and then opening the Print panel. On a high-dpi screen, the border appears fine in the preview; but if I drag the window to a low-dpi monitor, it disappears, presumably because the border resolves to less than one device pixel in width.
(Interestingly, though, if I set the border thickness to something like 0.01px, it still shows up OK as a single-pixel hairline on the page, whichever display it's on, and still appears in the print-preview on the Retina display, but not on the low-dpi monitor. So it's not purely about the scaling from CSS px to device pixels; something more is involved here.)
|
|
Reporter | |
Comment 5•4 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)
Could you attach a test-case here? It might be specific to border-collapsed tables or such, or just an artifact of how we do the border pixel snapping. The border should definitely show up in the generated PDF.
You are right, the borders are visible when exporting the print to pdf.
(:jfkthame) is right about the issue being not only limited to tables, but also other HTML elements as well.
Test Case:
<!-- Border of 1px doesn't get rendered in print preview -->
<div style="border: 1px solid black; height: 100px; width: 100px"> Bordered Div </div>
<!-- Border of 2px gets rendered in print preview -->
<div style="border: 2px solid black; height: 100px; width: 100px"> Bordered Div </div>
(:jfkthame) Its interesting that it works on high resolution displays. I tested this on a thinkpad to get this issue.
P.S. Pardon me for the late reply.
|
|
||
Comment 6•4 years ago
|
||
Ok so this is likely because print preview is scaled down to fit on the screen using (effectively) a CSS transform. So the same should be true of stuff like:
<!doctype html>
<div style="transform-origin: 0 0; transform: scale(0.5);">
<div style="border: 1px solid black; height: 100px; width: 100px"> Bordered Div </div>
</div>
In which case I think this would be a graphics issue more than a printing issue.
Description
•