Skip to main content
Search IntMath

Home | Math Display Experiments | Remove MathJax Flicker in JSXGraph

Remove MathJax Flicker in JSXGraph - processed using Mathjax

Page by Murray Bourne, Last updated: 06 Dec 2019

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

Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.