mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

Severe FPS Drop in Dense LineString Areas (Even Without Interaction)

Open LukasGrubis opened this issue 1 year ago • 0 comments

mapbox-gl-js version: v3.9.4

browser: Chrome Version 132.0.6834.160 (Official Build) (arm64)

Steps to Trigger Behavior

  1. Open https://codepen.io/Lukas-Grubis/pen/qEWzJpj
  2. Or open https://codepen.io/Lukas-Grubis/fullpage/qEWzJpj?nocache=true&view=
  3. Open Chrome DevTools → More tools → Rendering → Enable "Frame Rendering Stats".
  4. Move the mouse cursor inside the looped area, but DO NOT hover over any LineStrings.
  5. Observe massive FPS drops (from 60 FPS to ~10 FPS) and 100% CPU usage, even though the cursor is not interacting with any features.

Link to Demonstration

https://codepen.io/Lukas-Grubis/pen/qEWzJpj https://codepen.io/Lukas-Grubis/fullpage/qEWzJpj?nocache=true&view=

Expected Behavior

Moving the cursor inside an area that contains LineStrings (but NOT touching them) should NOT cause a performance drop. Mapbox should not trigger hit detection or rendering computations unless a feature is actually hovered over. Frame rate should remain stable at ~60 FPS.

Actual Behavior

FPS drops drastically (to ~10 FPS) when moving the cursor inside an area with many overlapping LineStrings—even when NOT hovering over them. CPU usage spikes to 100%. The issue happens only in areas with a high density of LineStrings. Zooming in resolves the issue, suggesting a problem with hit detection at lower zoom levels.

LukasGrubis avatar Feb 06 '25 10:02 LukasGrubis