MathJax rendering complications

[UnsungHero97]

I'm stuck with a weird bug that I'm not sure if it is related to my
error or MathJax error. Initially, I have a <div id="equation"></div>.
As the page loads, that div is populated via jQuery as such...

$('#equation').html(initialEquation); // give the div some MathML
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "equation"]); // render
the newly inserted MathML

... and that works as expected. Everything is cool : )

BUT... there is a problem that occurs after some interaction later.
This interaction is as follows. So I insert more MathML into
div#equation dynamically via jQuery and make calls to
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "equation"]); so that the
new MathML is rendered correctly, however, if I "undo" my actions,
essentially go backwards through my actions back to the very very
original MathML, the very very initial (the original) MathML renders
akwardly... so the very last undo that would result in rendering the
original MathML is done by...

$('#equation').html("").html(initialEquation); // clear all of the
HTML and set back to the original
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "equation"]); // render
the new MathML

The undoing is done using a Stack that remembers the MathML string
that was rendered every time new MathML was dynamically inserted, so
the bottom of the stack is the very initial MathML string:
initialEquation. So when I re-render the initialEqution MathML string,
essentially doing exactly what happened on page load, nothing shows
up. Using Firebug to inspect what has been generated, I came across
this:

<span style="position: absolute; top: -2.786em; left: 0em; clip:
rect(1e+7em, 1000em, -1e+7em, 1e+7em);">...</span>

... notice the clip CSS property and -1e+7em/1e+7em... that is an
exponent! It turns out that if I change these values, my MathML
becomes visible again : ) but why is this happening? Why is the CSS
getting exponential values?

Let me know if I need to clarify further as to what I am doing and to
better explain the issue.

Thanks,
Hristo

[Sean Hogan]

Hi Hristo. Thanks for reporting this issue.
Is there a public web-page where this behavior can be observed?

Sean

[UnsungHero97]

Hi Sean,

I put my application on the web. To best view the app, please use a
relatively new version of Firefox... haven't been testing in other
browsers yet. You can access it here:

http://hristo.oskov.com/Kamma/

To recreate the bug, do the following:

1. click the little square in the middle of the screen so that it
turns pink
2. click on the fraction box at the top and select the any of the
fractions from the drop-down options
3. now the middle of the screen should display the fraction you
selected
4. press ctrl-z to undo your fraction addition action

The expected behavior is to go back to the original square box that we
started with, but as it was rendered, nothing shows on the page. I
have tested this differently, starting out with a different structure
than the square box and trying to undo and it works. So the fault is
not in my undo, but rather in the way MathJax is rendering the exact
same MathML string:

<math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><mo
class="expand" id="tag0">&#x25FB;</mo></math>

This string is rendered at page load normally, but when I try to re-
render it, which is essentially what happens when I undo, things go
wrong.

Another bug kind of related to the original can be recreated by doing
the following:

1. click the little square in the middle of the screen so that it
turns pink
2. click on the sin() box at the top and select sin() or cos() from
the drop-down options
3. now the middle of the screen should have sin() or cos() displayed
with another square box
4. click the square box inside the newly inserted sin() so that it
turns pink
5. click on the fraction box at the top and select the left-most
(stacked) fraction of the three

The expected behavior is to have the sin() have the fraction inside
the parenthesis so that you can insert other stuff in the fraction,
but the way that it rendered after step 5 doesn't show the square
boxes.

However, this kind of works in a different situation... if you instead
started by inserting a fraction and then repeating the above steps
using either the numerator or denominator, then it works fine. But it
breaks again if you start with an integral and repeat the above steps
using the integrand box.

Anyway, I'm not sure why this is happening... it would be nice to get
some brainstorming going to try and resolve this. I don't know enough
about MathJax yet but I'm keen on understanding how it works on a
lower level.

Thanks,
Hristo

[Sean Hogan]

Hi Hristo,

In that page there is a HTML snippet like this:

<div id="output">
<div id="eq"></div><!-- hidden equation -->
<div id="equation"></div><!-- visible equation -->
</div>

If I remove the hidden equation, or even move it to after the visible equation, then the undo sequence seems to work fine.
This does seem like a MathJax issue - the hidden content that precedes the equation is corrupting it's measurements - but I'm not sure when it might be fixed.
I suggest you move the swap the hidden and visible equations for now.

Sean

[UnsungHero97]

Hi Sean,

Great catch! I should have thought of that. I guess my next question
is regarding the second rendering issue I noted above that still
persists after making the changes you recommended.

1. click the little square in the middle of the screen so that it
turns pink
2. click on the sin() box at the top and select sin() or cos() from
the drop-down options
3. now the middle of the screen should have sin() or cos() displayed
with another square box
4. click the square box inside the newly inserted sin() so that it
turns pink
5. click on the fraction box at the top and select the left-most
(stacked) fraction of the three

The expected behavior is to have the sin() have the fraction inside
the parenthesis so that you can insert other stuff in the fraction,
but the way that it rendered after step 5 doesn't show the square
boxes.

However, this kind of works in a different situation... if you instead
started by inserting a fraction and then repeating the above steps
using either the numerator or denominator, then it works fine. But it
breaks again if you start with an integral and repeat the above steps
using the integrand box.

So I can't really pinpoint the exact sequence of commands that result
in things breaking... I looked at the generated MathML after things
break, but W3C MathML validator tells me that it is valid. Any idea on
how to approach this problem?

Thanks,
Hristo

[Sean Hogan]

Hi Hristo,

if I follow that sequence and then call
MathJax.Hub.Reprocess("equation") then the numerator / denominator boxes
appear. That suggests that in your code the Reprocess() call is
occurring too early - before the MathML is fully updated.

Sean

[UnsungHero97]

Sean,

I never make calls to MathJax.Hub.Reprocess("equation"). Instead, I
make a call to MathJax.Hub.Queue(["Typeset", MathJax.Hub,
"equation"]); More specifically:

$('#equation').html("").html($("#eq").html()); // clear html and
bring in the newly formed MathML

MathJax.Hub.Queue(["Typeset", MathJax.Hub, "equation"]); // render

the new MathML

... so I thought by adding to the MathJax Queue, order would be
preserved? What is the benefit of using Reprocess over the "Typeset"?

Thanks,
Hristo

[Davide P. Cervone]

Typeset() calls Reprocess() internally. I think Sean was trying to
say that the equation seems to render fine when it is re-rendered (it
also renders fine when zoomed), and this suggests that there is a
timing issue. That is what I suspect as well, but I haven't spent
much time trying to track it down. I observe the same problem with
Safari as well as Firefox, so I don't think it is a browser-specific
timing issue.

You do have a complex setup, and the timing of MathJax running in
relation to the changes you are making to the DOM will be critical.
You may need to queue more of the commands that you think of as not
being associated with MathJax, especially those that modify the DOM,
because they may run out of sequence with the work that MathJax is
doing. Is it possible that you could send me an un-minimized version
of MathRibbon.js? It is a little hard to read the minimized one.

Davide

[UnsungHero97]

Hi Davide,

Thank you for your response and the explanation. I think you are right
in that it is most likely a timing issue. I think will resolve this
issue by restructuring my code so that I utilize the jQuery queue for
my commands related to re-rendering and updating the DOM.

The reason that I have a minimized version of MathRibbon.js is because
I don't want outsiders knowing what I do internally, but I would
appreciate you looking at it! What is your email so that I can email
you the file?

Thanks,
Hristo