From a82258fdf45e84602f9ffbd8a231ff5258e25178 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 27 Jan 2026 12:04:48 +0000
Subject: [PATCH] Reduce review panel flicker in Chrome when scrolling a large
 document (#30812)

GitOrigin-RevId: a5f210bc9643de221913c37fbd5c9e456677d120
---
 .../review-panel/hooks/use-review-panel-styles.ts        | 9 +++------
 .../frontend/stylesheets/pages/editor/review-panel.scss  | 2 ++
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel/hooks/use-review-panel-styles.ts b/services/web/frontend/js/features/review-panel/hooks/use-review-panel-styles.ts
index 727701ccc3..7bbaa41c71 100644
--- a/services/web/frontend/js/features/review-panel/hooks/use-review-panel-styles.ts
+++ b/services/web/frontend/js/features/review-panel/hooks/use-review-panel-styles.ts
@@ -4,22 +4,19 @@ import { useCodeMirrorViewContext } from '@/features/source-editor/components/co
 export const useReviewPanelStyles = () => {
   const view = useCodeMirrorViewContext()
 
-  const [styles, setStyles] = useState<CSSProperties>({
-    '--review-panel-header-height': '36px',
-  } as CSSProperties)
+  const [styles, setStyles] = useState<CSSProperties>({} as CSSProperties)
 
   const updateScrollDomVariables = useCallback((element: HTMLDivElement) => {
-    const { top, bottom } = element.getBoundingClientRect()
+    const { top } = element.getBoundingClientRect()
 
     setStyles(value => ({
       ...value,
       '--review-panel-top': `${top}px`,
-      '--review-panel-bottom': `${bottom}px`,
     }))
   }, [])
 
   const updateContentDomVariables = useCallback((element: HTMLDivElement) => {
-    const { height } = element.getBoundingClientRect()
+    const height = element.clientHeight
 
     setStyles(value => ({
       ...value,
diff --git a/services/web/frontend/stylesheets/pages/editor/review-panel.scss b/services/web/frontend/stylesheets/pages/editor/review-panel.scss
index aafd778f95..64a4e574d8 100644
--- a/services/web/frontend/stylesheets/pages/editor/review-panel.scss
+++ b/services/web/frontend/stylesheets/pages/editor/review-panel.scss
@@ -16,6 +16,7 @@ $rp-type-blue: #6b7797;
   --review-panel-empty-state-bg-color: var(--bg-light-primary);
   --review-panel-button-hover-bg-color: var(--bg-light-tertiary);
   --review-panel-border-color: var(--border-divider);
+  --review-panel-header-height: 36px;
   --review-panel-width: 230px;
   --review-panel-width-mini: 24px;
   --review-panel-color-scheme: light;
@@ -95,6 +96,7 @@ $rp-type-blue: #6b7797;
   box-sizing: content-box;
   width: var(--review-panel-width);
   min-height: var(--review-panel-height);
+  backface-visibility: hidden; // force compositing layer
 
   .dropdown-menu {
     z-index: 1;