Skip to content

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

Closed
changhw01 opened this Issue Nov 5, 2012 · 15 comments

8 participants

@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
Owner
hakimel 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();
} );
@hakimel hakimel closed this Nov 11, 2012
@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 hakimel added a commit that referenced this issue Nov 12, 2012
@hakimel note about #226 in readme 4c89380
@hakimel
Owner
hakimel commented Nov 12, 2012

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
Owner
hakimel 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?

@xhochy
xhochy 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);
});
@damianavila
@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).

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

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

Math support #36

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

Read and learn

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.