CODEWITHSUNDEEP
jsxgraph
Frunobulax
Frunobulax

Reputation: 345

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>

Upvotes: 0

Views: 520

Answers (1)

Alfred Wassermann
Alfred Wassermann

Reputation: 2323

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

Upvotes: 1

Related Questions