JSXGraph结合MathJax全屏模式下拖拽元素异常问题求助

Let’s dive straight into solving this problem—you’ve hit a conflict between MathJax’s DOM rendering behavior and JSXGraph’s fullscreen state management. When JXG.Options.text.useMathJax = true is enabled, MathJax’s automatic reflow and DOM manipulation triggers layout changes during element drags, which disrupts JSXGraph’s fullscreen container.

Here are two practical, tested fixes to resolve this:

1. Toggle MathJax Dynamically for Fullscreen #

Disable MathJax temporarily while in fullscreen mode, then re-enable it when exiting. This prevents layout conflicts during interactions:

var board = JXG.JSXGraph.initBoard('BOX-test', { 
  showFullscreen: true,
  // Hook into fullscreen state changes
  fullscreen: function(isFullscreen) {
    if (isFullscreen) {
      // Turn off MathJax during fullscreen interaction
      JXG.Options.text.useMathJax = false;
      board.fullUpdate(); // Refresh the board to apply changes
    } else {
      // Re-enable MathJax for LaTeX rendering
      JXG.Options.text.useMathJax = true;
      board.fullUpdate();
    }
  }
}); 
var point = board.create('point', [0,0]);

This way, you get smooth drag interactions in fullscreen, and your LaTeX content works normally when back to standard view.

2. Isolate Fullscreen Container & Block MathJax During Drag #

If you need MathJax enabled even in fullscreen, force JSXGraph to use the document body as its fullscreen container and block MathJax from re-rendering during drags:

JXG.Options.text.useMathJax = true;
var board = JXG.JSXGraph.initBoard('BOX-test', { 
  showFullscreen: true,
  fullscreenContainer: document.body, // Isolate fullscreen to avoid layout clashes
  // Prevent MathJax from reprocessing during drag
  drag: function() {
    MathJax.typesetClear();
  }
}); 
var point = board.create('point', [0,0]);

The fullscreenContainer setting reduces DOM overlap, while MathJax.typesetClear() stops MathJax from triggering unwanted reflows mid-drag.

Why This Happens #

MathJax continuously scans the DOM for LaTeX content to render. When you drag a JSXGraph element in fullscreen, the board’s position/size shifts trigger MathJax to re-scan and re-render elements. This unintentionally breaks JSXGraph’s fullscreen container, causing the board to shrink and the gray overlay to appear.

内容的提问来源于stack exchange，提问作者sacha friedli