javascript - SVG renders but gets cut off in Firefox only - why?

Question

I am using d3js, which uses SVG, to create a chart. View it at www.uscfstats.com/deltas (use 12842311 as the input value; right now it's VERY hacked together).

On Chrome, Safari, and Firefox 10 this rendered a full chart as expected, which took up the whole white box. On later versions of Firefox, however (specifically, 15) the top 200 or so px of the SVG render, but then the rest gets cut off.

When I open up the page in Firebug, I can highlight over HTML elements and it seems like they're all there, it's as though some big white box is covering up the bottom 75% of my chart (there isn't any such HTML element, though). I have click events on the dots, and the ones that are rendered I can click on, but the ones that aren't I can find but clicking on them does nothing.

I fixed the problem by writing

var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");

Why does this work and what happened?

Answer 1

What happened is that the spec for how svg sizing should work got clarified so it works better in various cases, and Firefox was updated to track the updated spec. In particular, <svg> now sizes the same way as other CSS replaced elements, instead of trying for auto-magic things that fail in all sorts of situations.

And in particular, it used to be that lack of width and height attributes was treated as sort of equivalent to setting them both to 100%, except it didn't really play nice with actually setting a width or height in CSS and had some other problems. So now, the behavior is that if you set width and height those are treated like presentational hints (just like width and height attributes for <img>) and if you don't you get the default 300x150 intrinsic sizing which you can then override with style rules as desired.