From 2dac33943505acf0c3715d92e598fe12f37d382b Mon Sep 17 00:00:00 2001
From: "Cox Geoffrey W." <63681414+geoff-cox@users.noreply.github.com>
Date: Mon, 12 Aug 2024 09:36:44 -0400
Subject: [PATCH 1/2] Update knowl.js

Removed line 315, which previously called MathJax.typesetPromise() before the knowl's visibility was updated. MathJax could not accurately measure the dimensions of elements while they were still hidden (display: none).

Updated line 60 to delay the call to MathJax.typesetPromise() until after the knowl becomes visible, but before the unrolling animation begins. This ensures that MathJax has the correct layout context for typesetting, preventing layout shifts and improving the smoothness of the animation.

I verified that knowls containing mathematical content are now rendered correctly without layout shifts and ensured that the unrolling animation remains smooth and that no visual glitches occur during the transition.
---
 js_lib/knowl.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/js_lib/knowl.js b/js_lib/knowl.js
index e3974f0a2..3d7c3a500 100644
--- a/js_lib/knowl.js
+++ b/js_lib/knowl.js
@@ -56,8 +56,11 @@ class SlideRevealer {
       this.animatedElement.setAttribute("open","");
       this.triggerElement.setAttribute("open","");
       this.contentElement.style.display = '';
-      // Wait for the next frame to call the toggle function
-      window.requestAnimationFrame(() => this.toggle(true));
+      // Trigger the animation to expand or collapse the knowl.
+      // We delay the MathJax typesetting until the knowl is visible to ensure proper measurements
+      // are taken, but before the unrolling begins. This helps avoid layout shifts and ensures
+      // smooth animation with correctly sized content.
+      MathJax.typesetPromise().then(() => window.requestAnimationFrame(() => this.toggle(true)));
     } else if (this.animationState === SlideRevealer.STATE.EXPANDING || this.animatedElement.hasAttribute("open")) {
       this.toggle(false);
     }
@@ -312,7 +315,6 @@ class LinkKnowl {
           this.outputElement.append(...children);
 
           // render any knowls and mathjax in the knowl
-          MathJax.typesetPromise([this.outputElement]);
           addKnowls(this.outputElement);
 
           // force any scripts (e.g. sagecell) to execute by evaling them

From 5b16144e8692808f12204c9b87f7797e000b72f0 Mon Sep 17 00:00:00 2001
From: "Cox Geoffrey W." <63681414+geoff-cox@users.noreply.github.com>
Date: Mon, 12 Aug 2024 09:55:29 -0400
Subject: [PATCH 2/2] Updated knowl.js for MathJax compatibility of hidden
 content

---
 js_lib/knowl.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js_lib/knowl.js b/js_lib/knowl.js
index 3d7c3a500..fc6c8d91d 100644
--- a/js_lib/knowl.js
+++ b/js_lib/knowl.js
@@ -57,7 +57,7 @@ class SlideRevealer {
       this.triggerElement.setAttribute("open","");
       this.contentElement.style.display = '';
       // Trigger the animation to expand or collapse the knowl.
-      // We delay the MathJax typesetting until the knowl is visible to ensure proper measurements
+      // Delay the MathJax typesetting until the knowl is visible to ensure proper measurements
       // are taken, but before the unrolling begins. This helps avoid layout shifts and ensures
       // smooth animation with correctly sized content.
       MathJax.typesetPromise().then(() => window.requestAnimationFrame(() => this.toggle(true)));