From 4b225db9da8fcfa9402fb7c76cfd6bd2196ae555 Mon Sep 17 00:00:00 2001 From: Smittix Date: Sat, 21 Feb 2026 14:44:46 +0000 Subject: [PATCH] Fix proximity radar jitter caused by CSS scale-on-hover feedback loop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The root cause was in proximity-viz.css, not the JS: .radar-device:hover { transform: scale(1.2); } When the cursor entered a .radar-device, the 1.2x scale physically moved the hit-area boundary, pushing the cursor outside it. The browser then fired mouseout, the scale reverted, the cursor was back inside, mouseover fired again, and the scale reapplied — a rapid enter/exit loop that looked like the dot jumping and dancing. Replace the geometry-changing scale with a brightness filter on the dot circle only. filter: brightness() does not affect pointer-event hit testing so there is no feedback loop, and the hover still gives clear visual feedback. Also removes the transition: transform rule that was animating the scale and contributing to the flicker. Co-Authored-By: Claude Sonnet 4.6 --- static/css/components/proximity-viz.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/static/css/components/proximity-viz.css b/static/css/components/proximity-viz.css index 133c09a..2a07dab 100644 --- a/static/css/components/proximity-viz.css +++ b/static/css/components/proximity-viz.css @@ -13,13 +13,11 @@ } .radar-device { - transition: transform 0.2s ease; - transform-origin: center center; cursor: pointer; } -.radar-device:hover { - transform: scale(1.2); +.radar-device:hover .radar-dot { + filter: brightness(1.5); } /* Invisible larger hit area to prevent hover flicker */