From 2448586050326c024b2807c88eea1ac5d9190eb6 Mon Sep 17 00:00:00 2001 From: marwin Date: Wed, 1 Apr 2026 15:48:44 +0200 Subject: [PATCH] Fix PDF rendering blur on high-DPI/mobile screens Scale canvas by devicePixelRatio and constrain CSS size to logical pixels so PDF pages render crisp on Retina and mobile displays. Co-Authored-By: Claude Sonnet 4.6 --- static/js/app.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/static/js/app.js b/static/js/app.js index 59a2f4d..799e3c0 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -2937,15 +2937,20 @@ async function renderPdf(arrayBuffer, contentEl, scaleOverride) { const inner = document.createElement('div'); inner.className = 'pdf-page-inner'; + const dpr = window.devicePixelRatio || 1; const canvas = document.createElement('canvas'); canvas.className = 'pdf-page'; - canvas.width = viewport.width; - canvas.height = viewport.height; + canvas.width = Math.round(viewport.width * dpr); + canvas.height = Math.round(viewport.height * dpr); + canvas.style.width = viewport.width + 'px'; + canvas.style.height = viewport.height + 'px'; inner.appendChild(canvas); wrapper.appendChild(inner); pdfVp.appendChild(wrapper); - await page.render({canvasContext: canvas.getContext('2d'), viewport}).promise; + const ctx = canvas.getContext('2d'); + ctx.scale(dpr, dpr); + await page.render({canvasContext: ctx, viewport}).promise; // Text layer disabled — re-enable once overlay rendering is resolved }