From c513e5dc2bcdb54e33af0ddcbf623e510e352ef0 Mon Sep 17 00:00:00 2001 From: hawkgs Date: Tue, 18 Feb 2025 14:04:15 +0200 Subject: [PATCH] refactor(devtools): fix component inspector highlighting (#59995) Use `position: absolute` instead of `position: fixed`. This fixes the odd behavior that can be reproduced when scrolling. PR Close #59995 --- .../projects/ng-devtools-backend/src/lib/highlighter.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts b/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts index da58d347a5d..b0d4dac35c5 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/highlighter.ts @@ -39,7 +39,7 @@ function createOverlay(color: RgbColor): {overlay: HTMLElement; overlayContent: const overlay = document.createElement('div'); overlay.className = 'ng-devtools-overlay'; overlay.style.backgroundColor = toCSSColor(...color, 0.35); - overlay.style.position = 'fixed'; + overlay.style.position = 'absolute'; overlay.style.zIndex = '2147483647'; overlay.style.pointerEvents = 'none'; overlay.style.display = 'flex'; @@ -196,8 +196,8 @@ function showOverlay( const {width, height, top, left} = dimensions; overlay.style.width = ~~width + 'px'; overlay.style.height = ~~height + 'px'; - overlay.style.top = ~~top + 'px'; - overlay.style.left = ~~left + 'px'; + overlay.style.top = ~~top + window.scrollY + 'px'; + overlay.style.left = ~~left + window.scrollX + 'px'; positionOverlayContent(overlayContent, dimensions, labelPosition); overlayContent.replaceChildren();