title: SVG renders but gets cut off in Firefox only - why?
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I fixed the problem by writing </p>
  
  <p><code>var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");</code></p>
  
  <p>Why does this work and what happened?</p>