I got a weird problem on Firefox. I have a <svg> element that has some <text> inside of it. The svg scales relative to the parent. Now I've noticed that something weird is happening on Firefox with my text (specifically in Arial font). Basically, when resizing the window, once the container is larger than 550px, it is displaying the font much larger than it should be.

Here is a Fiddle. Just resize the preview screen and see what happens between 645px and 652px.

Below is a gif of me resizing the window. You can clearly see that the text completely changes once the containerWidth exceeds a certain width. Almost as if it gets bolder:

https://gyazo.com/27b8284b0e3b4de88a36795a292b1bb3

I've also included 2 screenshots:

Font looking weird:

Font looking normal:

I've read here that FireFox by default displays fonts 'bolder' than Chrome & Edge, but that does not explain the fact that it only appears to happen when the container exceeds a certain width...

What is causing this and how can I fix it?