It's my first use of D3.js but I encounter a bug on Safari. When I load the page, there is some artifacts at the end of the animation. If I try to resize the window or do anything with the web inspector, the artifacts disapear.
I've already looked for any similar posts and I found this one which is pretty old but seems really similar to my issue. I've found it seems linked to this webkit issue and tested in this test case but it has been solved and the test case does not seem to be buggy on Safari anymore.
According to this post I tried to use this patch to move the svg element after loading but without any positive effect
I also tried to create svg and g elements myself without append and use javascript only to set correct attributes but without any positive effect neither.
Does anyone have any idea why and how to fix it ?
Code
var svg = d3.select(container)
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "d-block mx-auto mt-2")
.append("g")
.attr("transform", "translate("+(width/2)+","+(height/2)+")");
Capture
