Tengo un problema extraño en Firefox. Tengo un elemento <svg> que tiene algo de <text> dentro. El svg se escala en relación con el padre. Ahora he notado que algo raro está pasando en Firefox con mi texto (específicamente en fuente Arial). Básicamente, al cambiar el tamaño de la ventana, una vez que el contenedor es más grande que 550 px, muestra la fuente mucho más grande de lo que debería ser.

Aquí hay un violín . Simplemente cambie el tamaño de la pantalla de vista previa y vea qué sucede entre 645px y 652px .

A continuación se muestra un gif de mí cambiando el tamaño de la ventana. Puede ver claramente que el texto cambia por completo una vez que el ancho del containerWidth supera un cierto ancho. Casi como si se volviera más audaz:

https://gyazo.com/27b8284b0e3b4de88a36795a292b1bb3

También he incluido 2 capturas de pantalla:

Fuente que se ve rara:

Fuente que parece normal:

He leído aquí que FireFox muestra de manera predeterminada las fuentes 'más audaces' que Chrome y Edge, pero eso no explica el hecho de que solo parece suceder cuando el contenedor excede un cierto ancho...

¿Qué está causando esto y cómo puedo solucionarlo?