MathJax dosen't float well with reveal.js

[changhw01]

Please see "www.stanford.edu/~huangwei/MySlides" and navigate to the next page.

It happens when I use the HTML-CSS output of MathJax. If we use the SVG output then it is fine. I have tried it using FireFox and Chrom.

[lucasb-eyer]

Same problem in Safari.

Interestingly, it only fails when transitioning to the slide. If you load the page at the slide number (press F5), it displays well.

[changhw01]

@lucasb-eyer Yes, indeed.

[hakimel]

Seems like MathJax is struggling to position itself correctly, probably a conflict with all of transforms that happen in reveal.js. You can fix this by adding the following snippet below the Reveal.initialize call:

Reveal.addEventListener( 'slidechanged', function( event ) {
    MathJax.Hub.Rerender();
} );

[lucasb-eyer]

Thanks for looking into it!

Could you add a sentence about it in the readme, section "Slide change event"?
Something like "Some libraries, like MathJax (See #226), get confused by the transforms. Often times, this can be fixed by calling their update or render function from this callback." would suffice.

[hakimel]

Good idea, I've added this to the readme.

[damianavila]

Hakimel, I follow the note... when I go forward in two consecutive slides containing mathjax there is no problem, but when I comeback, it crushes... any idea?

[damianavila]

FYI, the crush happens only with some themes such as default, but no with linear, cube or zoom... Regards

[hakimel]

Hey, not sure why that would happen but I imagine it might just be a local issue. Can you try restarting the browser, or even a different browser to see if it's the same there?

[xhochy]

JFTR: Updating only the formulas on the current slides improves performane quite a lot if you have a large amount of formulas:

Reveal.addEventListener( 'slidechanged', function( event ) {
    MathJax.Hub.Rerender(event.currentSlide);
});

[damianavila]

El 05/12/12 09:47, Uwe L. Korn escribió:

JFTR: Updating only the formulas on the current slides improves
performane quite a lot if you have a large amount of formulas:

Reveal.addEventListener( 'slidechanged', function( event ) {
MathJax.Hub.Rerender(event.currentSlide);
});

—
Reply to this email directly or view it on GitHub
#226 (comment).

Thanks for the tip...

[damianavila]

Hakimel, in FIrefox there is no problem... but in Chrome it crush...

[drvinceknight]

I'm only just discovering reveal.js but the mathjax thing is not great... I've got the code suggested by xhochy but now my slides move ever so slightly as the mathjax re-renders... I'm not offering any help (I don't really understand a lot of this) but just letting you know that it's not ideal...

[drvinceknight]

Just reread the start of this threat and seen that I can output to SVG. This seems to work slightly better (still a slight budge when the page loads). Is there any reason to choose SVG over HTML-CSS or vice-versa? (I realise that this is not the right place to ask, apologies).