Home | Math Display Experiments | Remove MathJax Flicker in JSXGraph

Remove MathJax Flicker in JSXGraph - processed using Mathjax

Process with MathJax Process with KaTex

Now using MathJax processing

This example shows how you can reduce MathJax flicker when user input changes some of the values.

Summary of the technique:

1. On page load, hide MathJax math until it is fully processed, using the "End Typeset" signal
2. On user input where values are changed (by dragging), hide the MathJax math again, by showing a "Processing..." message.
3. Also, hide the MathJax preview using .MathJax_Preview{display:none}. (The MathJax documentation says you can stop the previews from appearing by using preview:"none" in the configuration, but this didn't work for me.)
4. You need to use board.suspendUpdate() to prevent the text updating while the user drags.
5. board.mode has value 1 when an object is being dragged, 0 otherwise.
6. Show the math on mouse "up".
7. If the user pauses while dragging, a timer fires the Update event and the math shows.

Process with MathJax Process with KaTex