JSXGraph 元素消失答案

【问题标题】：JSXGraph elements disappearingJSXGraph 元素消失
【发布时间】：2016-06-14 08:50:23
【问题描述】：

我刚开始使用 JSXGraph。我有一些代码，一旦我开始移动它们，板的内容就会立即消失。这只发生在 Firefox (47.0) 上，而代码在 Chrome 和 MSIE 上运行良好。我在 Windows 7 pro 上，JSXGraph 版本是 0.99.4。

以下是演示问题的最小示例。只需加载页面（在 Firefox 上）并移动该点。我知道如果我摆脱表格，我可以解决这个问题，但我认为 HTML 仍然有效。我想知道我做错了什么。

<!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>

【问题讨论】：

标签： jsxgraph

【解决方案1】：

这似乎是 Firefox 中的一个错误。如果

包含 JSXGraph 板的表格单元格是其所在行中最大（高度）的单元格
或者如果此表格单元格具有属性valign=top。

如果 JSGraph <div> 在其表格单元格内垂直浮动，Firefox 正在失去对 SVG 元素的控制 - 出于某种未知原因。一个简单的解决方法是使用 canvas 作为渲染引擎而不是 SVG。

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

【讨论】：

谢谢。我已经使用 flexbox 解决了我的问题。尽管如此，即使它是 Firefox 中的一个错误，了解 JSXGraph 如何触发此行为也会很有趣。毕竟，很多人使用 Firefox。