# MathJax dosen't float well with reveal.js#226

Closed
opened this Issue Nov 5, 2012 · 15 comments

### 8 participants

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.

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.

@lucasb-eyer Yes, indeed.

Owner
commented Nov 11, 2012

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();
} );
closed this Nov 11, 2012

Thanks for looking into it!

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.

added a commit that referenced this issue Nov 12, 2012
 hakimel note about #226 in readme 4c89380
Owner
commented Nov 12, 2012

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?

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

Owner
commented Nov 27, 2012

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?

commented Dec 5, 2012

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);
});

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

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...

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).

commented Sep 15, 2013

Still not a great experience out of the box, but switching to SVG reduces rendering issues (although the equations don't look great with all themes).

referenced this issue in GitbookIO/gitbook Apr 20, 2014
Closed

### Math support #36

pushed a commit to enovajuan/reveal.js that referenced this issue Dec 2, 2014
 hakimel note about #226 in readme bd645cc