pdfjs-dist v2.16.105 Rendering pdfjs-dist with more than 50 pages of pdf files in iOS webkit will cause forced page refresh

[isPaker]

How to control memory overflow ?

[starkmarkus]

On iOS WebKit, this is usually a memory-pressure problem. There is not really a single pdf.js option that prevents it if the app renders and keeps many pages/canvases alive at the same time.

The main fix is to render fewer pages at once and release resources aggressively.

Things I would try:

• do not render all 50+ pages at startup
• render only the visible page(s) plus a small buffer
• destroy or clear canvases when pages scroll far out of view
• reduce render scale on iOS
• avoid keeping both high-resolution canvas and image previews in memory
• cancel old render tasks when the user scrolls quickly
• call cleanup methods when pages are no longer needed

Conceptually:

const renderTask = page.render({ canvasContext, viewport })
// When the page leaves the viewport:
renderTask.cancel()
canvas.width = 0
canvas.height = 0
page.cleanup()

If you are using pdf.js directly, I would implement virtual scrolling / page recycling. Keep maybe 2–5 pages rendered, not the whole document.

Also, pdfjs-dist@2.16.105 is quite old, so it would be worth testing with a newer pdf.js version if possible. But even on newer versions, iOS Safari/WebKit can still reload the page if too many large canvases are alive.

So the answer is mostly: control memory at the viewer level by lazy-rendering and cleaning up pages, rather than trying to render the whole PDF and relying on pdf.js to fit it into iOS memory.