Reduce review panel flicker in Chrome when scrolling a large document (#30812)

GitOrigin-RevId: a5f210bc9643de221913c37fbd5c9e456677d120

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>({
+  const [styles, setStyles] = useState<CSSProperties>({} as CSSProperties)
-    '--review-panel-header-height': '36px',
-  } 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,

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;