Hidden canvas element may break layout

ms-tng commented 1 month ago

Before you start - checklist

[X] I followed instructions in documentation written for my React-PDF version
[X] I have checked if this bug is not already reported
[X] I have checked if an issue is not listed in Known issues
[X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

The text layer functionality of pdf.js produces a hidden canvas element:

<canvas class="hiddenCanvasElement" lang="" height="0" width="0"></canvas>

pdf.js includes CSS (see here) to ensure that this doesn't interfere with the layout. However, this CSS is not included in react-pdf's TextLayer.css. Without it, displaying PDFs including a text layer may break the layout (see "Steps to reproduce"). As a workaround, one can include the linked CSS directly, but I guess it would make sense to include it in TextLayer.css.

Steps to reproduce

Create a React app (with root element #root) and include e.g. this CSS:

body {
  margin: 0;
}

#root {
  height: 100vh;
  box-sizing: border-box;
}

Then render a PDF with react-pdf and observe that the <body> has height greater than the intended 100vh, which is due to the hidden canvas element.

Expected behavior

The hidden canvas element should not affect the layout.

Actual behavior

The hidden canvas element causes additional vertical space.

Additional information

No response

Environment

Browser (if applicable): Chrome 125.0.6422.113
React-PDF version: 9.0.0
React version: 18.3.1

LikeDreamwalker commented 3 weeks ago

Same issue here, and I confirmed this is related to the hidden Canvas element. I encountered this issue with the responsive layout and found out that no matter how I tried, my page's body would always be rendered larger than before, and I couldn't find any elements that could do this. Also, on my tests, this issue is not related to SSR or RSC, and so on fresh techs; also, because the hidden Canvas element will be rendered just under the body element, it seems like there is not a very easy way to avoid this.

Thanks for mentioning me, and please fix it.

LikeDreamwalker commented 3 weeks ago

Same issue here, and I confirmed this is related to the hidden Canvas element. I encountered this issue with the responsive layout and found out that no matter how I tried, my page's body would always be rendered larger than before, and I couldn't find any elements that could do this. Also, on my tests, this issue is not related to SSR or RSC, and so on fresh techs; also, because the hidden Canvas element will be rendered just under the body element, it seems like there is not a very easy way to avoid this.

Thanks for mentioning me, and please fix it.

Roll back to 8.0.2 can avoid this issue, and everything seems fine. I also found out that using useResizeObserver as the sample does, while in some responsive layouts, especially using flex or without specific width or height value, can cause a repeat-render issue. I think this issue might also related, but not sure what causes it. And in version 8 this issue also can be avoided.

evenmed commented 2 weeks ago

Bump. The hiddenCanvasElement is adding 22px vertically to my app and causing vertical scroll.

I was able to fix by adding the following style:

.hiddenCanvasElement {
  position: absolute;
}

So far the text layer seems to be rendering fine.

wojtekmaj / react-pdf