HTML-CSS output: if the page already contains an element with id "MathJax-Element-N-Frame", predictably bad things result

Created by: christianp

An author of some text didn't know how to get a π symbol, so he got MathJax to render it, then copied and pasted the output back into the WYSIWYG editor. What he didn't notice (and it can reasonably be argued he shouldn't have to worry about this) was that he had pasted in the entire HTML element produced by MathJax, which had id attribute MathJax-Element-3-Frame. To compound his bad luck, he pasted all this before the third occurence of LaTeX in the page.

When MathJax processes a bit of LaTeX, it inserts an element with an ID of the form MathJax-Element-N-Frame in place, to store the rendered output. Later on, when it comes to filling that element up, it uses document.getElementById to retrieve it. In this case, that returns the pasted element instead of the one MathJax just created.

I've made a minimal example at http://codepen.io/christianp/pen/VKymrd. Here's how it looks on Chrome: (The person who reported this was running Firefox)

Not only has the third bit of maths gone in the wrong place, the metrics seem to be messed up for every other bit of maths on the page, even stuff that appeared before our pasted element.

The obvious solution is not to have such badly-named elements in your page to start with, but I think MathJax could be more careful here.

I can think of two solutions

• rather than using document.getElementById(jax.inputID+'-Frame'), keep a reference to the element itself. I assume there's a good reason we don't do this.
• At the cost of one extra call (actually, maybe a few) to document.getElementById for each bit of maths, in MathJax.ElementJax.GetID, check that the element #MathJax-Element-N-Frame doesn't already exist. There are a few elements for each N though, right? And I suppose we could be really unlucky and have those elements added into the page in-between different stages of the MathJax process.