CODEWITHSUNDEEP
javascriptcsssvgcross-browserd3.js
edi9999
edi9999

Reputation: 20574

Firefox element with width=n doesn't show

I have a very simple code, that works on Chrome, but not on firefox:

JS

//Creating the svg element
svgContainer= d3.select("body")
    .append("svg")

//fill it with blue and set it's width to 0
svgContainer
    .style("background-color","blue")
    .style("width",0);

//change the size again
svgContainer
    .style("width",200)

HTML

<body>        
</body>

In chrome, the rectangle draws, but not on firefox. Seems like you can't change the value of the style element a second time. Strange, isn't it ?

Here's a JSFIDDLE http://jsfiddle.net/cUmXu/2/

EDIT: Actually, you can change the value, but not if the first value you have given to the width is 0. This is even though strange.

SECOND EDIT: Seems that when using 

svgContainer
    .style("width","200px")

it works. If someone knows why, please share.

Upvotes: 3

Views: 1279

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

With your code 

svgContainer
    .style("width",200)

you created the following element (Chrome):

<svg style="background-color: blue; width: 200px;"></svg>

At Firefox we got just 

<svg style="background-color: blue; width: 0px;">

Chrome is just more forgiving for some mistakes then Firefox. width can have different units like %, em, pt, px... so you have to provide unit with number greater then 0. But 0 without unit is allowed because 0em is the same as 0px.

From CSS Values and Units Module Level 3:

Lengths refer to distance measurements and are denoted by in the property definitions. A length is a dimension. However, for zero lengths the unit identifier is optional (i.e. can be syntactically represented as the ‘0’).

So, with

svgContainer
    .style("width", "200px")

we get also at Firefox proper width:

<svg style="background-color: blue; width: 200px;">

See also Fallback for CSS attributes without unit

Upvotes: 5

Related Questions