Smittix 4b225db9da Fix proximity radar jitter caused by CSS scale-on-hover feedback loop ...

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>

2026-02-21 14:44:46 +00:00

5.6 KiB

Raw Blame History

View Raw