Flashing on resize
jonahallibone opened this issue · comments
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
I am trying to make my PDF responsive, however, I continually run into the same issue where the PDF pages disappear and reappear during the render phase. This causes my container to lose height and thus resets the scroll, which is a 2nd order problem caused by this behavior. In the other threads I've seen about responsive width, I haven't seen anyone document this issue.. Is there any solution? I have already implemented the suggested fix for scaling (having two pages render depending on if the scale has changed or not). I was wondering if there was some similar work around for sizing, as I have not been able to figure it out.
Kapture.2024-01-29.at.22.48.11.mp4
Steps to reproduce
This is roughly what my code looks like:
<PdfViewerContainer>
<ChakraReactPdfDocument
file={pdfUrl}
onLoadSuccess={onDocumentLoadSuccess}
loading={<Spinner />}
height="min-content"
minH="100%"
margin="auto"
>
{display === "scroll" ? (
pageArray.map((page) => (
<Box
boxShadow="xl"
w="min-content"
key={page}
_notLast={{ mb: 3 }}
marginLeft="auto"
width={`${containerWidth - 32}px`}
>
{isPageRendering(page) ? (
<Page
key={`${page}@${getPageScale(page)}`}
className="prevPage"
pageNumber={page}
scale={renderedPageScale[page]}
width={containerWidth - 32}
/>
) : null}
<Page
key={`${page}@${scaleAsNumber}`}
pageNumber={page}
scale={scaleAsNumber}
inputRef={(node) => setPageRef(node, page)}
width={containerWidth - 32}
onRenderSuccess={onRenderSuccess}
/>
</Box>
))
) : (
<Page pageNumber={Number(pageNumber)} />
)}
</ChakraReactPdfDocument>
</PdfViewerContainer>
Expected behavior
I expect the PDF to not flash when resizing it's parent container.
Actual behavior
The PDF disappears and reappears.
Additional information
No response
Environment
- Browser (if applicable): Chrome 120.0.6099.234
- React-PDF version: 7.7.0
- React version: 18.2.0
- Webpack version (if applicable):
Duplicate of #418
Hey there,
Thanks for putting this project together, I'm using it to display a resume pdf on my portfolio site.
I'm having this problem as well where the container loses height on resize. It's a behaviour that exists in the next-app
example as well. It's not a huge deal for me, but if the user changes their window width I'd like that to be as seamless as possible.
Screen.Recording.2024-04-04.at.1.58.54.PM.mp4
In my usecase all the pages are rendered in sequence just like in the next-app
example, so when the canvas loses height I get a series of flickering boxes for each page before rerender.
I tried to implement the solution from #418 but couldn't get it figured out.
Steps to reproduce
- install/run example from
sample/next-app
- open dev tools
- resize window to below maxiumum width