From 3434d8c908c3e657c3d5f1fb00c475536790179b Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 21 May 2024 12:36:43 +0100
Subject: [PATCH] Trigger PDF.js canvas redraw on document visibility change
 (#18446)

GitOrigin-RevId: 44b3ce3ebd8b0e48c51451bbfc5c2d54397a9355
---
 .../pdf-preview/components/pdf-js-viewer.jsx  | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.jsx b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.jsx
index 833acdca34..83e7a9a8e0 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.jsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.jsx
@@ -402,6 +402,36 @@ function PdfJsViewer({ url, pdfFile }) {
     [initialised, setZoom]
   )
 
+  /**
+   * Work around an issue in Chrome 125 that causes canvas elements to become blank
+   * when a tab is inactive, by making the canvas redraw when the tab becomes active.
+   * https://github.com/mozilla/pdf.js/issues/18100
+   * https://issues.chromium.org/issues/339654395
+   * This can be removed once Chrome 127 is widely available.
+   */
+  useEffect(() => {
+    const listener = () => {
+      if (document.visibilityState !== 'hidden' && pdfJsWrapper) {
+        window.setTimeout(() => {
+          for (const canvas of pdfJsWrapper.container.querySelectorAll(
+            'canvas'
+          )) {
+            canvas.style.display = 'none'
+            window.setTimeout(() => {
+              canvas.style.display = 'block'
+            }, 1)
+          }
+        }, 100)
+      }
+    }
+
+    document.addEventListener('visibilitychange', listener)
+
+    return () => {
+      document.removeEventListener('visibilitychange', listener)
+    }
+  }, [pdfJsWrapper])
+
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
   /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
   return (