fast-reflexes/better-react-mathjax

Not rendering latex consistently

ben-brooker opened this issue · 4 comments

ben-brooker commented

Screenshot 2022-06-28 at 12 38 55

I am building a NextJS application with server-side rendering. This code works fine in some cases and not in others. For example, Upon refreshing a successfully rendered page, the wrapper seems to no longer work. Also, it seems to work well on edge but not safari. Are you aware of this issue? Is there a way around it? Thanks.

fast-reflexes commented

Can you recreate the behaviour in a sandbox perhaps?

Last time I tested it it worked as it should in all browsers and I have a NextJS application with SSR myself where I have never experienced any problems so there is likely something additional at play here.

Also, why do you use dangerouslySetInnerHTML? Is this a component or the root of your app? The MathJaxContext should only be in the root component of the app.. not that this should affect the current behaviour but still :)

ben-brooker commented

Hi,

The MathJaxContext component wraps a HTML component which formats text. The project is rather large which is why I opted to only wrap this component.

It is now working on the browsers, however it flickers slightly (between rendered and non-rendered) when refreshing the page (and sometime does not render the latex). Do you know why this happens?

fast-reflexes commented

It sounds like you have a complex setup with potentially some very particular scenarios...

  • Flickering should be handled by hideUntilTypeset property.. there are also other tips and tricks regarding this if you read the docs here in Github.
  • If there are dynamic updates to the content, you should set dynamic flag on the MathJax component.
  • What do you mean by refreshing the page, a full page reload? If so, it seems there's something very particular at play
    because it has never happened to me... Is there any errors in the console? If SOME page loads work and others don't, there
    is some randomness, like the order of rendering or something, that causes problems.
  • I assume the children are only text and HTML elements ... If there is other code running inside this child it may interact with
    MathJax in a bad way since MathJax also manipulates the DOM. Try to switch the current content for something hard-
    coded and see if the behaviour persists. If it does not, then there is something with this component that is problematic.

Can you point me to anywhere where this can be seen? Almost impossible to help out otherwise :(

fast-reflexes commented

Removing since no further information was added. Please reopen with more information if needed.