🏠 back to Observable

Problem with svg styling in Firefox

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


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:

Mmmh, ok: specifying px seems to fix

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