Firefox only: just calling a particular jQuery selector breaks MathJax's spacing

[christianp]

First of all, sorry I couldn't reduce this down to a minimal example which shows the problem. I've got absolutely no idea why this problem occurs, but I've definitely tracked down the line that causes it.

To reproduce: in Firefox, go to http://checkmyworking.com/misc/mathjax-selector-bug/. Click on "Start", wait for the first question to be displayed fully, and then click on the "Next" button in the top-right. The inline maths overlaps normal text. Screenshot: http://checkmyworking.com/misc/mathjax-selector-bug/mathjax-selector-bug.png

When you click the "Next" button, the method QuestionDisplay.show on line 346 of http://checkmyworking.com/misc/mathjax-selector-bug/scripts/display.js is called. That overwrites the contents of #questionDisplay with the new question's content. Lots of stuff happens, but the pertinent parts are that exam.display.updateQuestionMenu is called, and then Numbas.display.typeset is called on #questionDisplay. The latter function just runs a MathJax Typeset command on that element.

In updateQuestionMenu, the offending line is line 229, which goes like this:

$('*').find('#anything');

That's just a jQuery selector which doesn't do anything with the selected elements. What seems to be important is that it first selects everything, and then tries to select elements by id. Changing the second selector to a class or tagname, e.g. .anything or anything, doesn't cause the problem. The problem also stops when I remove the line completely and touch nothing else.

As far as I know, jQuery selectors shouldn't have any side-effects, and this one is called before the MathJax Typeset command. I've only seen this problem in Firefox (12.0 on my machine, but also on the ones at my uni, which I think are on an older version).

Any idea at all what's going on? I can easily avoid it in my production code, but I thought it was worth reporting here.

[dpvc]

It seems to have something to do with the web fonts. When I use local fonts, it is OK. I'm wondering if there isn't a timing issue where MathJax is not properly detecting when the fonts are available. I'll have to look into it further.

[dpvc]

Note: The MathJax Typeset() call will return before the math is fully typeset (because the processing of the math will have to be suspended while it loads the fonts). What happens after QuestionDisplay.show() runs? Does it depend on the math being finished? Could anything change that with the styling that could be changing the font sizes of the surrounding text?

[christianp]

Thanks for looking at this. No, nothing else is done after the Typeset call. I've moved the jQuery selector line around as well - when it's on the line directly above the call to Typeset, the problem occurs. When it's on the line directly after, there's no problem.

Should font availability only be a problem once? The problem happens even if you go back and forth between the same questions several times.

[dpvc]

Yes, it should only be a problem once, but I can't think of anything else that would be the issue. Of course, I'm also not sure how the jQuery call would affect that, either. It almost has to be a timing problem; using the web fonts does introduce asynchronous situations that aren't present for the local fonts, so I suspect that is somehow the source of the problem.

[pkra]

I was trying to reproduce this on @christianp demo but it's using the old rackspace cdn address so MathJax does not load. Could you update the demo page?

[pkra]

Ah, I could use the bookmarklet and I don't see this bug anymore.

[christianp]

I've updated the page, but it looks fine for me as well now. (in firefox 19! Crikey, this laptop is behind the times)

[pkra]

Great. Closing this as "abandoned".