diff --git a/packages/app-tests/e2e/pdf-viewer/pdf-viewer.spec.ts b/packages/app-tests/e2e/pdf-viewer/pdf-viewer.spec.ts index 44a1ec86a..63f04b800 100644 --- a/packages/app-tests/e2e/pdf-viewer/pdf-viewer.spec.ts +++ b/packages/app-tests/e2e/pdf-viewer/pdf-viewer.spec.ts @@ -262,8 +262,6 @@ test.describe('PDF Viewer Rendering', () => { await fileChooser.setFiles(path.join(__dirname, '../../../../assets/example.pdf')); - await page.waitForTimeout(2000); - await page.getByRole('button', { name: 'Continue' }).click(); await expect(page.locator(PDF_PAGE_SELECTOR).first()).toBeVisible({ timeout: 30_000 }); diff --git a/packages/lib/client-only/hooks/use-field-page-coords.ts b/packages/lib/client-only/hooks/use-field-page-coords.ts index ecb088194..95aa3b3a8 100644 --- a/packages/lib/client-only/hooks/use-field-page-coords.ts +++ b/packages/lib/client-only/hooks/use-field-page-coords.ts @@ -91,10 +91,19 @@ export const useFieldPageCoords = ( const mutationObserver = new MutationObserver(() => { const $page = document.querySelector(pageSelector); - if ($page) { - calculateCoords(); - attachResizeObserver($page); + if (!$page) { + return; } + + // Only recalculate when the observed page element has changed (e.g. new + // element appeared after virtual list scroll). Skip when mutations are + // from elsewhere in the DOM and the page element is unchanged. + if ($page === observedElement) { + return; + } + + calculateCoords(); + attachResizeObserver($page); }); mutationObserver.observe(document.body, { diff --git a/packages/lib/client-only/hooks/use-page-renderer.ts b/packages/lib/client-only/hooks/use-page-renderer.ts index 0d3018fe3..380bdcc06 100644 --- a/packages/lib/client-only/hooks/use-page-renderer.ts +++ b/packages/lib/client-only/hooks/use-page-renderer.ts @@ -61,8 +61,8 @@ export const usePageRenderer = (renderFunction: RenderFunction, pageData: PageRe const imageProps = useMemo( (): React.ImgHTMLAttributes & Record & { alt: '' } => ({ className: PDF_VIEWER_PAGE_CLASSNAME, - width: `${Math.floor(scaledViewport.width)}px`, - height: `${Math.floor(scaledViewport.height)}px`, + width: Math.floor(scaledViewport.width), + height: Math.floor(scaledViewport.height), alt: '', onLoad: () => setRenderStatus('loaded'), // Purposely not using lazy here since we can use the virtual list overscan to let us prerender images.