[Bug]: Page is flickering when canvas is resized

[michae43]

Attach (recommended) or Link to PDF file

https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf

Web browser and its version

Chromium Version 134.0.6998.117

Operating system and its version

Linux X1 6.1.0-32-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.129-1 (2025-03-06) x86_64 GNU/Linux

PDF.js version

5.1.91

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

1. Copy the following code into a file called viewer.html:

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.mjs"></script>
<script type="module">
  pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.mjs";
  const pdf = await pdfjsLib.getDocument("https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf").promise;
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  async function renderPage() {
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1 });
      const scale = canvas.clientWidth / viewport.width;
      const scaledViewport = page.getViewport({ scale: scale });
      canvas.width = scaledViewport.width;
      canvas.height = scaledViewport.height;
      page.render({
	  canvasContext: ctx,
	  viewport: scaledViewport
      });
  }

  let lastWidth = canvas.clientWidth;
  const resizeObserver = new ResizeObserver(async (entries) => {
      for (let entry of entries) {
          const newWidth = entry.contentRect.width;
          if (newWidth !== lastWidth) {
	      lastWidth = newWidth;
	      renderPage();
	  }
      }
  });
  resizeObserver.observe(canvas);

  renderPage();
</script>

<canvas style="width: 100%;"></canvas>

2. Run the following command: python3 -m http.server
3. Navigate to: http://0.0.0.0:8000/viewer.html
4. Resize the browser window along the width.

What is the expected behavior?

PDF's page should scale without any flickering in between renders.

What went wrong?

Flickering when the PDF's page is scaled.

Link to a viewer

No response

Additional context

I have not found any similar issue when searching for "flickering".

[Snuffleupagus]

You'll need to do what the default viewer does:

• Re-scale the existing canvas with CSS.
• Render the new canvas in the background.
• Once re-rendering is done, replace the old canvas with the new one.