Different browsers generating different svg?

[falconair]

I'm trying to resolve an issue where chrome and safari render my charts ver well but firefox does not. I have set both, firefox and chrome windows to exactly the same width and loaded the same page (same backend, same libraries, etc.).

The structure of both svgs is exactly the same. There are some minor differences, such as firefox setting stroke color to 'black' while chrome sets it to 'rgb(0,0,0)'. Those don't concern me. However, many of the position values are completely off. For example, <g class="dimple-axis"... is set to transform="translate(0, 70) in chrome, while transform="translate(0, -17)" in firefox. There are many other such examples in a chart, and my site has many charts.

Note that when I extract out the svg for chrome and firefox and manually paste it into my page, both chrome and firefox show exactly the same rendering.

In other words, the back-end/client side code is identical, window widths are identical, the browser's ability to display svg is identical. However, the actual generated svg has wrong position values!

Any ideas how I can debug this better? I'll be happy to paste the actual svg, if you like.

Update:
So far, it looks like the error is in function dimple._parentHeight(). Firefox is returning value 13 while chrome is returning 100. This is apparently because on chrome, parent returns the svg node, while firefox returns the node which contains svg (so parent of svg). I'm not up to speed on DOM mechanics so I'm not sure what dimple actually expects. If I have to wrap a div around svg, with specific attributes, I don't mind doing that (since there is a big warning in that method about FireFox having trouble with this calculation).

[falconair]

So it looks like my issue is resolved. I set the parent tag's style to {display: block} and all of a sudden my charts showing up beautifully! (although firefox height shows 105 while chrome shows 100...doesn't seem to be an issue though).

Some detail.

As I've mentioned in some other tickets, I've wrapped dimplejs in an xtag library, so I can display dimple charts using the following html:

<dimple-chart data="flowdata" height="100px" width="100%" margin-top="10" margin-bottom="30" margin-left="5" margin-right="5" chart-desc="flow" debug='true'>
    <dimple-axis position="x" type="category" field="type" orderBy="Executed,Canceled,Routed-Away" title="hello"></dimple-axis>
    <dimple-axis position="y" type="measure" field="shares" display="false" title="hello"></dimple-axis>
    <dimple-series type="bar" series="type"></dimple-series>
  </dimple-chart>

Apparently, xtag components need to have their display explicitly set to block. See following issue:
x-tag/core#16

[johnkiernander]

Thanks for all the information, that's very useful to know.