SVG blur/pixelation on Firefox after zoom/pan operations

[CallMeAl3x]

When using react-simple-maps on Firefox, the SVG map becomes blurry/pixelated after zoom or pan operations. The map stays in a "low quality" rendering state and doesn't restore to crisp rendering after the transform ends.

This issue does not occur on Chrome or other Chromium-based browsers.

Steps to reproduce
Open a page with ComposableMap + ZoomableGroup on Firefox
Zoom in/out using mouse wheel or pinch gesture
Wait for the zoom to complete
Observe that the SVG remains blurry
Expected behavior
The SVG should render crisply after zoom/pan operations complete, as it does on Chrome.

Workaround found
We found a workaround by toggling a CSS class with translateZ to force GPU layer re-composition after zoom:

const forceRepaint = useCallback(() => {
  const svg = containerRef.current?.querySelector("svg");
  if (!svg) return;

  svg.classList.add("firefox-repaint");
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      svg.classList.remove("firefox-repaint");
    });
  });
}, []);

// Call forceRepaint after zoom ends
onMoveEnd={({ coordinates, zoom }) => {
  // ...
  setTimeout(forceRepaint, 100);
  setTimeout(forceRepaint, 250);
}}

.firefox-repaint {
  transform: translateZ(0.1px);
}
.firefox-repaint .rsm-geography {
  transform: translateZ(0);
}

We also run a repaint loop during wheel events (every 50ms) to reduce blur during zooming.

Additional context
Firefox version: Latest (tested on 120+)
react-simple-maps version: 3.0.0
OS: Windows 11
This appears to be related to Firefox's SVG transform rendering optimization that doesn't properly restore quality after transforms complete. Similar issues have been reported for other SVG/canvas libraries.

Live bug : https://map-guesser.bonefons.com/