CODEWITHSUNDEEP
javascriptfirefoxsvgcross-browserd3.js
Andrew Latham
Andrew Latham

Reputation: 6152

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, 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?

Upvotes: 22

Views: 22969

Answers (7)

Marco
Marco

Reputation: 748

Had this issue especially with small SVG Icons. Editing the viewBox property of the SVG by making it larger than the drawn image solved the problem for me.

Upvotes: 1

Радислав Ялилов
Радислав Ялилов

Reputation: 81

Insert svg in flex container and add property flex: auto; to svg. It works for me

Upvotes: 0

Ash Catchem
Ash Catchem

Reputation: 921

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.

Upvotes: 0

RobotEyes
RobotEyes

Reputation: 5250

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');

Upvotes: 2

dado
dado

Reputation: 74

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

Upvotes: 0

Amit
Amit

Reputation: 21

I was also facing same issue

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

worked for me.

Upvotes: 2

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

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.

Upvotes: 18

Related Questions