Polymaps has stopped working in Firefox

[peterbe]

At first I struggled and fought and thought I was implementing it wrong.

All examples are broken in Firefox. For example: http://cl.ly/JMYv

Any idea what can be done to fix this?

[mbostock]

The problem is that Polymaps (or arguably the user) isn't setting the "width" and "height" attributes on the SVG element. You can fix this problem on polymaps.org by saying:

var svg = document.querySelector("#map");
svg.setAttribute("width", 960);
svg.setAttribute("height", 500);

[shawnbot]

I actually don't think that this is Polymaps' fault. The issue appears to be that Firefox doesn't treat an SVG element's intrinsic size the same way that Webkit does. Firefox thinks that the SVG element's bounding box is only 300x150, rather than the full 950x500 that it would fill if it actually extended to 100% width and height of the enclosing element. You can "fix" it by pasting this into the JavaScript console, which confirms my suspicion:

var svg = document.querySelector("svg.map");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");
map.resize();

I think that we can fix this on polymaps.org by giving the SVG elements width and height in CSS, but on your end the solution will depend on how the enclosing HTML element is styled. If you want to give the map its size in CSS, you have do something like this:

div.map {
  position: relative;
  height: 500px;
}
div.map svg {
  display: block;
  width: 100%;
  height: 100%;
}

Or, if you don't need a flexible layout and you know how big your map is going to be, you can assign the map a specific size in JavaScript:

var map = po.map()
  // .container(), etc.
  .size({x: 640, y: 480});

[straup]

What Shawn said. See also:

https://github.com/straup/windshield/commit/cae52a1c40f4c29c2ab9fe1f89a6b4abedd320aa#example/index.html