Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 14:50:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix proximity radar jitter caused by CSS scale-on-hover feedback loop

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-02-21 14:44:46 +00:00
parent aba4ccd040
commit 4b225db9da
1 changed files with 2 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/components/proximity-viz.css
View File

@@ -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 */