From 89d67e324dd60c0bb1ecc61e02ac46286424279c Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Sun, 7 Jun 2026 13:06:51 -0500 Subject: [PATCH] Delay showing problem content until after MathJax content has rendered. This was suggested by @dpvc in https://github.com/openwebwork/pg/pull/1431. The point is to prevent the visual motion that occurs while the MathJax content is rendered. This doesn't use the `#problem_body` id selector since that is not on all problems (it isn't in Gateway tests), but uses the `.problem-content` class selector instead, since that is on all problems. Also, a `for of` loop and `document.querySelectorAll` is needed for tests, since there can be more than one problem. I am not entirely sold on the empty area shown in the mean time, but it does prevent the jitter for the text within the problem. Perhaps if someone wants to toy with css, a loading block could be shown with a transition that fades in the problem when the MathJax rendering is completed. Note that webwork2 renders MathJax in places outside of the problem content, and those will not be affected by this. --- htdocs/js/MathJaxConfig/mathjax-config.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/htdocs/js/MathJaxConfig/mathjax-config.js b/htdocs/js/MathJaxConfig/mathjax-config.js index 20fbace262..3bb862b2cf 100644 --- a/htdocs/js/MathJaxConfig/mathjax-config.js +++ b/htdocs/js/MathJaxConfig/mathjax-config.js @@ -103,6 +103,13 @@ if (!window.MathJax) { MathJax.startup.defaultReady(); MathJax.startup.document.constructor.ProcessBits.allocate('findScripts'); + }, + pageReady() { + return MathJax.startup.defaultPageReady().then(() => { + for (const problemBody of document.querySelectorAll('.problem-content')) { + problemBody.style.visibility = ''; + } + }); } }, options: { @@ -134,4 +141,8 @@ if (!window.MathJax) { ignoreHtmlClass: 'tex2jax_ignore' } }; + + for (const problemBody of document.querySelectorAll('.problem-content')) { + problemBody.style.visibility = 'hidden'; + } }