Blurry SVG path on Firefox when zooming

[lebesnec]

I don't know if this is a Firefox bug or a d3 bug or if I'm doing something wrong but I have a very blurry rendering for SVG path when I zoom, in Firefox (Chrome et Edge are working) :

Firefox :

Chrome

Demo (try to zoom to the max level on the red circle) :
https://plnkr.co/edit/oBMsUrvDppsPHlhN

[Fil]

Can you upgrade the test to a recent version of d3? Current version is 7.8.

In script.js you'll need to change the code to:

function zoomed({transform}) {
  layer.attr("transform", transform);
}

var svg = d3.select("#app")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .call(zoom)

var layer = svg.append("g").attr("transform", transform);

svg.call(zoom.transform, transform);

[Fil]

Note: I see the same thing as you on Firefox. Note sure what to do about it.

[lebesnec]

oh yes I forgot to change the version when I forked that example.
Here is an updated version with your recommended changes: https://plnkr.co/edit/xDadopItbHBMzD9w

My guess is that something is wrong with Firefox anti-aliasing, and it's not a problem with d3.js.