Delayed rendering of PDF pages

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.1.1 or PDF.js Viewer Demo | PDF.js Express

Detailed description of issue
We have a series of PDFs which - when viewed using @pdftron/pdfjs-express-viewer - when the “documentLoaded” event occurs, render first as blank pages, then slowly each page is rendered, possibly when the user scrolls the page into view. In our implementation, as pages scroll out of view, they appear to return to blank state and then appear to render when returned into view.

I reviewed this forum for similar questions, and didn’t find many.

I followed this guide: How to Optimize PDFs for Accurate Rendering in PDF.js | PDF.js Express and tried (a) flattening and (b) PDF/A which (other than increasing the file sizes) made no difference to this behaviour.

The PDF I’m using is only 6 pages long (1.2MB).

I also threw together a minimal pdf.js implementation, and I think it displays the same issue: nickm-pdf-viewer-test - CodeSandbox

Expected behaviour
The PDF renders fully when loaded, and is kept in memory, rather than having pages unloaded as the user scrolls.

Does your issue happen with every document, or just one?
A subset of documents

Link to document

Code snippet
Happens on the demo: PDF.js Viewer Demo | PDF.js Express
Our code: PDF Viewer ($2568672) · Snippets · GitLab

Help required
I’d like to understand what it is about these PDFs that is causing this behaviour (I’m fairly certain it’s the PDF) although if there are things I can change about our pdf.js express implementation that will improve matters, I’d love to hear about them please.

3

Hi there,

Thank you for contacting pdf.js express forums,

I notice that when viewing your particular PDF on scroll, there are some warnings in the console right after the pages are rendered:
Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: HTML Standard

I also notice that when scrolling and zooming in/out, the CPU usage goes much higher compared to another PDF.

Please note that this could be related to the PDFJS library .

Best regards,
Kevin Kim

4

Thank you @kkim

I don’t know what to do about the Canvas2D warnings, thanks for spotting that, I’ll take a look around on the interwebs and PDFJS library repo.

5

After tinkering around, I removed both PDF.js and PDFJS Express Viewer, and replaced with an iFrame.

Chrome loads the PDF instantly, and fully, with no issues.
Firefox exhibits the same issues as the PDF viewers, blank pages, and then as the user scrolls, displays a blank page with a spinner and then the page appears after a second or two.

Assuming that Firefox uses PDF.js to render PDF files in an iFrame, I’ll continue down this line of investigation.