Firefox renders svg files slowly when scaling

I'm currently developing an interactive map consisting of html, css, svg and javaScript files. Here is an early build of the map:

http://h2897289.stratoserver.net/roman-map/staging/

You can zoom in and out with the mouse-wheel (end positioning of zooming doesn't work not far). What I'm worried about is that zooming in Chrome 90.0 works fluently, while the zooming animation in Firefox 88.0 is choppy.

I've implemented a frame rate counter in the bottom right corner and in Firefox the fps drop to 10 fps while zooming.

The map consists of several layered SVG files which are stacked through absolute positioning. The base layer (div with class 'layer-0') is 176 kb large, although I've already optimized all SVGs as far as possible.

The zoom animation is done via css transformation:

@keyframes animateZoom-2 {
   100% {
   transform: scale3d(2, 2, 1);
   }
}

I already tried zooming via the GSAP library, but it makes zooming even slower in all browsers.

If I remove this large base layer SVG file, zooming seems fluent in all browsers. Unfortunately, the large SVG File cannot be simplified by removing details.

So my question: Why is SVG scaling in Firefox so much slower than in all other browsers? And is there a way to circumvent this problem. Maybe generating an image, replacing the SVG files with the image, zoom the image and finally switch back to the SVG files?