SVG Renders But Gets Cut Off In Firefox Only - Why?

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,

Solution 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.

Solution 2:

I was also facing same issue

.attr("width", window.innerWidth).attr("height",window.innerHeight)

worked for me.

Solution 3:

In firefox you need to define what units you're using: px, % etc

thus the following didn't work for me:

var width = 800,
    height = 600;

var el = d3.select('#d3_element')
    .style('width', width)
    .style('height', height);

but the following did work:

var el = d3.select('#d3_element')
    .style('width', width + 'px')
    .style('height', height + 'px');

Solution 4:

Curiously, "100%" worked for width but nor for height. I ended setting both to innerWidth/innerHeight. Firefox 31.0 on CentOS6. FYI

Solution 5:

Also double check and make sure that you're not using variable names like innerWidth or outerHeight. That was the problem in my case. IE9 and Chrome renders it fine but Firefox (33.0) goes crazy - maybe a bug.