Root-component border is cutoff

[tyometarou]

Long time no see!
react-to-print is very good library

sorry i couldn't reply about 1px solid issue last year、、、
so this issue was closed

A lot of time passed since then.

I was able to reproduce the phenomenon!

https://codesandbox.io/s/react-to-print-forked-gd8onz?file=/example.css:200-285

I did only two things

at your example code
example css
modify relativeCSS and testClass

.relativeCSS {
  border: solid 1px #707070;
}

.testClass {
  background: #e6ebed;
}

in this case

border-color #707070 is very light　on the #e6ebed　 in the print preview

[MatthewHerbst]

Hi! Thanks for re-reporting, and for the example!

The issue seems to the the margin: 0 we set as the default style:

https://github.com/gregnb/react-to-print/blob/e739ca293af22c2af99054c2d81235c5526ec49f/src/index.tsx#L29-L41

Taking your example, first, I made these changes to make the issue easier to see:

.relativeCSS {
  border: solid 5px #707070;
}

.testClass {
  background: red;
  border: solid 5px green;
}

Then, in examples/ClassComponent/index.js, on the ReactToPrint component, I set pageStyle="" to override the default style we set. Doing that fixes the border problem, but then shows things we don't want people to see like the url, page number, title, etc.

Not sure what a good fix will be here, let me think about it

[siaikin]

I think this is a rendering issue specific to the zoom level. Is it not necessary to worry too much about it? In the printing field, physical length units such as mm/cm/inch/pt are generally used instead of relative units such as px.

[MatthewHerbst]

I think this is a rendering issue specific to the zoom level. Is it not necessary to worry too much about it? In the printing field, physical length units such as mm/cm/inch/pt are generally used instead of relative units such as px.

Most web developers use units such as px. Just because a user clicks print does not mean they actually intent to print a physical document. These days, using the browser to save to PDF is very common. Regarding zoom levels, I do not believe that is the issue, but if it were, we have no control over the zoom level the browser sets in the print dialog.

[siaikin]

I think this is a rendering issue specific to the zoom level. Is it not necessary to worry too much about it? In the printing field, physical length units such as mm/cm/inch/pt are generally used instead of relative units such as px.

Most web developers use units such as px. Just because a user clicks print does not mean they actually intent to print a physical document. These days, using the browser to save to PDF is very common. Regarding zoom levels, I do not believe that is the issue, but if it were, we have no control over the zoom level the browser sets in the print dialog.

I tried to scale the printed PDF at different ratios, and generally, the above problem occurs when scaling down the PDF and displays correctly when scaling up. This is not related to the length unit, as long as the border width is too small, the problem will occur. And this is not related to ReactToPrint. Even if I print the entire webpage, the same problem occurs. I think this should be a problem with the browser.

[MatthewHerbst]

Could be, browsers don't have a standard printing API so they do all sorts of weird things when printing 😢