Math disappears?

Question

When I view a thread (like this one: Physics & derivatives written in a weird way ) that has embedded math, I see the LaTeX-like code for a few seconds, then it disappears, leaving blank boxes where the math should be. This happens both in my usual browser (Opera), and in Firefox (28.0).

What I suspect is happening is that whatever engine you're using is rendering the math as black text, expecting the user to have a white or light-colored background. This makes it quite difficult for those of use who prefer dark backgrounds to see.

I also notice other places where similar problems happen. For instance, the 'Title' box on this page contained some very dark grey text before I typed my title in it. I think you need to either hard-code all colors, or code everything as foreground/background attributes, if you want things to be universally visible.

Edit: Here's an attempt at linking a screenshot of the page.

As you can see, despite comments about site design, with the exception of the math, it renders perfectly well as white text on black, and IMHO is much easier on the eyes (which is why I do it).

@MadScientist: I should put that code snippet in a user .CSS file? And it would work everywhere, not just on SE? If so, that's brilliant! Many thanks!

Answer 1

Of course the site expects the user to have a light background as that is part of the design of all the sites that use MathJax.

There are pretty much endless ways that users could modify the site design if they want to, it doesn't really make much sense for SE to try and support them all.

If you modify the site design to a dark background, just add a rule like the following to make the math parts visible again:

.MathJax {
  color: white;
}

If you're modifying the site CSS, SE is not responsible if you break anything.

Answer 2

I have, I think, found a solution, at least in my browser (Opera). Right-clicking on an equation, instead of bringing up the normal browser menu, brings up a MathJax specific menu. From there, you can choose an option to render as SVG rather than the default, and (possibly in combination with various user.css things like

.MathJax_SVG svg > g, 
.MathJax_SVG_Display svg > g
{
  fill: #FFF;
  stroke: #FFF; 
}

I haven't yet tested things to see if the CSS is necessary, or whether the MathJax change is permanent, or needs to be repeated on each new page of math.