1741887 - MathJax rendering issue of overline/underline (in math equations) at some zoom levels where the overline takes less than 1 dev pixel.

Status: NEW

(Core :: Graphics: Text, defect, P3)

Description

[Nathan Wallach]

Attachment: 2021-11-18_17-09.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Steps to reproduce:

Open https://www.jirka.org/badmj.html which is a page with a small MathJax equation using \overline{A}. Scale down to 80% or 67%.

Actual results:

The bar above the A disappears at 80% and 67% zoom. At 50% and above 80% zoom levels it appears.

Similar problems were seen in WeBWorK problems using MathJax 3.1.2 and WeBWorK 2.16 (MathJax 3.1.2) . In WeBWorK problems the \overline{} is missing at several zoom levels.

Expected results:

The bar should appear at all zoom levels.

Comment 1

[Nathan Wallach]

MathJax (https://www.mathjax.org) is a Javascript display engine used to support mathematical formulas in web pages.

The bug is mentioned in https://github.com/mathjax/MathJax/issues/2795 (specific to Firefox).

Apparently the thin horizontal lines are either not being drawn (or being drawn and then drawn over) during the rendering of the page.

When CSS was used to increase the font-size for the missing \overline very significantly, then the missing horizonal line would appear. Using font-size: 240% in a test WeBWorK problem seemed to work for essentially all zoom levels tried. Smaller values between 150% and 220% at steps of about 10% worked (got the line to appear) at some zoom levels and failed at others.

An older related issue with MathJax was in reported/discussed in https://github.com/mathjax/MathJax/issues/2701 and was apparently resolved by a change in MathJax for other browsers. That change did not solve the problem for current versions of Firefox (at least not for Firefox 94.0.1 on Linux, and some recent version of Firefox on Windows 10). The sample page used to demonstrate the issue in this bug report was set up by the author of that MathJax issue report, but suffices to demonstrate the current problem with Firefox.

The bug is having an impact on WeBWorK problems (for WeBWorK 2.16 which uses MathJax 3.1.2) when the MathJax equations use \overline or \underline. A discussion of the issues for WeBWorK is at https://github.com/openwebwork/webwork2/issues/1524 with screenshots of the problem for Firefox on Windows 10, and a discussion of the behavior of Firefox 94.0.1 on Linux at different scales and with/without the CSS change discussed as a fix for the "older" issue.

I strongly suspect that the cause is a browser rendering issue and not a problem in MathJax.

Note: The bug does not seem to effect Firefox 78.15.0esr from Debian 11 to any major extent. No problems are seen with different zoom levels and https://www.jirka.org/badmj.html. When testing with a WeBWorK problem, only at one zoom level did one of the "extender lines" of the type used by \overline and \underline in MathJax fail to appear. At other zoom levels everything appeared correctly. Thus, the older version of Firefox is handling the MathJax equations better than the current version.

Comment 2

[Nathan Wallach]

I am not sure this is a MathML related issue, but maybe I am mistaken.

Using the context menu from MathJax "Math settings" -> "Math Renderer" from "CHTML" to "SVG" avoids the issue.

Using the menus to see a zoomed expression also displays the missing overline.

The problem seems to be with the rendering of the HTML+CSS generated by MathJax for display as part of the "regular" HTML page.

Comment 3

[Nathan Wallach]

This problem still affects Firefox 96.0.3 (64-bit) (via Flatpak) on Linux.
Some feedback about when the bug might be investigated and fixed would be helpful.

Comment 4

[Gingerbread Man]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
20220126154723

:emilio is this the right component? Do you happen to know someone who could have a look? Thanks in advance.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

No, MathJax doesn't use MathML, it uses a regular ::before pseudo-element. The font it's using has a very thin dash, and it seems it can disappear out of existence if it becomes small enough, presumably because we round down its height to zero.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Somewhat similar test-case.

When exactly it disappears depends on resolution and font used but at different zoom levels the dash here also suffers from the same issue.

Comment 7

[Nathan Wallach]

Similar reports about problems with "thin" vertical lines in MathJax not rendering in Firefox:

• https://github.com/mathjax/MathJax/issues/2732
• https://github.com/mathjax/MathJax/issues/2741
• https://github.com/mathjax/MathJax/issues/2844

There is a small test case: http://mrcal.secretsauce.net/tst.html (from the last report above) which does not render properly at 100% zoom in 98.0.2 (64-bit) on Linux via flatpak.

I suspect it is the same issue as for the thin horizontal lines.

Comment 8

[fabien.maussion]

I can confirm that this is affecting my class lecture notes as well (I'm a university teacher): https://fabienmaussion.info/intro_to_programming/week_06/03-Assignment.html

The overlines on math equations are not displayed properly in certain zoom levels (in particular, they do not show up at the 100% zoom level).

Comment 9

[Emilio Cobos Álvarez (:emilio)]

I'm confused, at 100% zoom level it should always show up, unless they use transforms which is not the case. What math font are you using Fabien? What is your device pixel ratio? (screen scale, etc?)

(In reply to Nathan Wallach from comment #7)

There is a small test case: http://mrcal.secretsauce.net/tst.html (from the last report above) which does not render properly at 100% zoom in 98.0.2 (64-bit) on Linux via flatpak.

Even if I use a non-HiDPI screen all lines show up for me at 100% zoom...

Comment 10

[fabien.maussion]

For me http://mrcal.secretsauce.net/tst.html does NOT render at 100% Zoom on linux on both my screens. But it DOES show at 90% and 110% zoom...

Comment 11

[fabien.maussion]

Actually the lines always disappear on even zoom levels (60, 80, 100, 120...) and appear on odds (70, 90, 110...)

Comment 12

[Nathan Wallach]

I am still seeing these problems in the various sites at common and "reasonable" zoom levels using FireFox 99.0.1 (64-bit) on Debian Linux via mozilla-flatpack on a 1920x1080 resolution screen (the resolution the screen recommends using).

http://mrcal.secretsauce.net/tst.html

• 100% - all the vertical lines are missing in the top equation
• 67% - only one vertical line on each side in the top equation
• OK (two vertical lines on each side) at 50%, 80%, 90%, 110%, 120%, 133%, 150%, 170%
• That site has <mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 113.1%; position: relative;" display="true" tabindex="0" ctxtmenu_counter="0">
• If I change the "font-size: 113.1%" to "font-size: 100%" the vertical line appears at 90%, 100%, one becomes faint at 110%, but the lines disappear at 80%, 67%.

---

https://fabienmaussion.info/intro_to_programming/week_06/03-Assignment.html

• 80%, 100% the \overline{x} in the 2nd formula in the displayed equation (a = \overline{y} - b \overline{x} ) does not appear.
• OK at 50%, 67% 90%, 110%, 120%, 133%, 150%, 170%
• That site has <mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 119.5%; position: relative;" display="true" tabindex="0" ctxtmenu_counter="5">
• If I change the "font-size: 119.5%" to "font-size: 100%" the line appears at 100%, 110% but disappears at 67%, 90%, 120% while is OK also at 80%. 133%, 150%.
• If I change the "font-size: 119.5%" to "font-size: 110%" the line appears at 80%, 100%, is faint at 90% and at 110% sometimes disappeared and sometimes was faint. The lines disappeared at 67%, 90%, 120% while were OK also at 80%. 133%, 150%.

---

If I have the OS change the resolution to 1600x900 (same 16:9 ratio) everything seems to behave the same and lines disappear at the same zoom levels.