JSXGraph elements disappearing

I just started working with JSXGraph. I have some code where the contents of a board immediately disappear once I start moving them around. This only happens with Firefox (47.0) while the code runs fine on Chrome and MSIE. I'm on Windows 7 pro, JSXGraph version is 0.99.4.

Below is a minimal example to demonstrate the problem. Just load the page (on Firefox) and move the point around. I'm aware that I can work around the problem if I get rid of the table, but I think the HTML is valid nevertheless. I'd like to know what I am doing wrong.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="iso-8859-1">
    <link rel="stylesheet" type="text/css" href="jsxgraph.css" />
    <script type="text/javascript" src="jsxgraphcore.js" charset="utf-8"></script>
  </head>
  <body>
    <table>
      <tr>
        <td><div id="box" class="jxgbox" style="width:180px; height:180px;"></div></td>
        <td style="width:20%;">&nbsp;</td>
        <td><div class="jxgbox" style="width:360px; height:360px;"></div></td>
      </tr>
    </table>
    <script type="text/javascript">
     var board = JXG.JSXGraph.initBoard("box", {
       boundingbox: [-10, 10, 10, -10],
       grid: false,
       axis: false
     });
     var ax = board.create('axis', [[0, 0], [1, 0]]);
     ax.removeAllTicks();
     var p1 = board.create("point", [3, 2]);
    </script>
  </body>
</html>

Solution

This seems to be an error in Firefox. The JSXGraph board will work properly if

the table cell containing the JSXGraph board is the largest (in height) cell in it's row
or if this table cell has the attribute valign=top.

If the JSGraph <div> is vertically floating inside of it's table cell Firefox is loosing control of the SVG elements - for some unknown reason. A simple workaround would be use canvas as rendering engine instead of SVG.

 var board = JXG.JSXGraph.initBoard("box", {
   renderer: 'canvas',
   boundingbox: [-10, 10, 10, -10],
   grid: false,
   axis: false
 });