Problem with svg styling in Firefox

Community Help
1

Hi, I have a dataviz in an svg elment wrapped into a div. The rationale behind this is that such a div is scrollable. So, when you open the notebook with a smartphone, the svg width is not scaled down and you can just scroll to view the viz with decent dimensions.

It works in Chrome and in Safari but it seems broken with Firefox.

E.g., Chrome / Safari

ok
ok1398×1144 117 KB

Firefox:

ko
ko1158×822 66.2 KB

It looks like the svg isn’t styled correctly despite the following piece of code:

  const svg = div.append('svg')
    .style("width", box)
    .style("height", box);

here is the notebook:

2

Mmmh, ok: specifying px seems to fix

  const svg = div.append('svg')
    .style("width", `${box}px`)
    .style("height", `${box}px`);
1 Like