Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hidden canvas element may break layout #1815

Closed
4 tasks done
ms-tng opened this issue Jun 3, 2024 · 3 comments
Closed
4 tasks done

Hidden canvas element may break layout #1815

ms-tng opened this issue Jun 3, 2024 · 3 comments
Labels
bug Something isn't working fresh

Comments

@ms-tng
Copy link

ms-tng commented Jun 3, 2024

Before you start - checklist

  • I followed instructions in documentation written for my React-PDF version
  • I have checked if this bug is not already reported
  • I have checked if an issue is not listed in Known issues
  • 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
@ms-tng ms-tng added the bug Something isn't working label Jun 3, 2024
@LikeDreamwalker
Copy link

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
Copy link

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
Copy link

evenmed commented Jun 17, 2024

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.

@obecker obecker mentioned this issue Aug 11, 2024
Open
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working fresh
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@wojtekmaj @evenmed @ms-tng @LikeDreamwalker