mathjax
Font problems in Firefox on 24 inch monitor
Issue Summary
I discovered that I am experiencing some pretty severe font problems for MathJax in Firefox (version 102.2.0esr (64-bit)) but only when using a large monitor (24 in., 1920 x 1080 resolution). I also found the equations look bad at 100% Firefox browser zoom level but fine at 110%. The same equations look correct in Firefox on a smaller laptop monitor at 100% browser zoom level (14 in., 1920 x 1080 resolution). They also look correct in Chrome and Microsoft Edge on both my large and small monitors (also 100% browser zoom level). I typically use Chrome, so I’m not sure how long this issue could have been occurring (maybe the entire time I've been working w/ MathJax). Some of my colleagues see the same issue, and some can’t reproduce the issue (even when seemingly using the same settings and screen sizes).
The problem only occurs for the main MathJax display. It looks fine in the zoom pop-up box. The issue seems to at least affect stretchy fences, summation and product symbols, and square root symbols (there could be other things, though, too). The problem is not present when I change from Math Renderer HTML-CSS to SVG. I know in the past you've warned about HTML-CSS, but this is what we've retained on our website as the default as of now because for the most part we like the look of it. Is this problem just something we'd have to live with (for some people) if we want to stick w/ HTML-CSS mode, or is there anything else we could do to help it? Also, any idea why some of us see the issue and some of us don't? Thank you in advance!
Here are some examples from https://pubs.acs.org/doi/10.1021/acs.jctc.2c00257 (it's open access, so you should be able to view it):
Eq 1: 24 in. monitor, 100% browser zoom, Firefox:
14 in. laptop screen, 100% browser zoom, Firefox:
Here’s an example showing how the equations in the zoom pop-up box appear totally fine:
Eq 2: 24 in. monitor, 100% browser zoom, Firefox:
14 in. laptop screen, 100% browser zoom, Firefox:
Eqs 22/23: 24 in. monitor, 100% browser zoom, Firefox:
14 in. laptop screen, 100% browser zoom, Firefox:
And here’s an example from https://pubs.acs.org/doi/10.1021/acs.jctc.1c01044 (inline-formula toward the end in the "Conformational Clustering" section):
24 in. monitor, 100% browser zoom, Firefox:
14 in. laptop screen, 100% browser zoom, Firefox:
Technical details:
- MathJax Version: MathJax.js v2.7.9
- Client OS: Windows
- Browser: Firefox version 102.2.0esr (64-bit)
Supporting information:
Browser console errors (if applicable):
I don't have a larger monitor to test on, so I can't reproduce the issue. Which version of Windows are you using, 10 or 11?
It looks like there may be an issue with Firefox's refreshing of large characters (there was an issue like this in v3 with WebKit, but I haven't seen it in v2). If you resize the browser window, does it refresh properly? If you zoom in or out, does that change anything?
I'm using Windows 10. If I resize the browser window on my large 24 in. monitor, the problem characters remain a problem still. If I use the full size window on my 24 in. monitor and change my browser zoom level in the top right corner from 100% to 110%, the problem goes away (the problem only seems to be present at 100% or lower). I just found that I can also replicate it on my 14 in. laptop screen if I change the zoom level in the top right from 100% to 67% or lower (looks fine at 80% and higher).
@dpvc Just to be clear, is there anything we can do to fix this ourselves? Is it an individual user or configuration issue, a MathJax issue, a browser issue, etc.? Should I report this to Firefox? Would it resolve if we switched from v2.7.9 to v3?
Sorry for not getting back to you on this. I'm currently teaching my fall courses, so have much less free time than usual. I haven't been able to look into this further, but it is probably a browser issue having to do with how the browser decides what should be refreshed.
We have just released an alpha version of MathJax 4.0.0 which includes support for 10 different fonts (including the STIX2 fonts), along with automatic line breaking, so it might be worth looking into that rather than v3, as I think you needed those features.