Presence of U+00BA throws off grid layouts in Chrome

[meyerweb]

Issue Summary

In Chrome 99 OS X (possibly other versions, not sure), there’s a layout bug that’s triggered by the presence of the º symbol.

Given: a <figure> element where there is MathJax text and then a <figcaption>, where the <figure> is a grid container and the MathJax container and <figcaption> are allowed to auto-flow into the grid, Then: there is an empty grid item of some sort inserted if there is, in a MathJax element anywhere on the page, whether on- or off-screen, a º (U+00BA, MASCULINE ORDINAL INDICATOR) symbol. If U+00BA is not present on the page, Chrome lays out the grid as intended.

My intuition is that the bug occurs because some sort of whitespace or other empty node is being inserted into the <figure> element at its beginning, similar to a ::before, and that’s being turned into a grid item by Chromium. Which it should, if such a node is indeed somehow being inserted by the presence of U+00BA on the page. No such node is obvious to me in Chrome’s Web Inspector, but I may not know where to look.

I acknowledge that this may be a Chrome bug rather than a MathJax bug, but I’m starting here because I can‘t work out how this is happening, and I’m hoping you might be able to tell me so I can take the information to the Chromium bug tracker, if that’s where the report really needs to be filed.

Steps to Reproduce:

1. Load https://meyerweb.com/eric/css/tests/chrome/grid/without-degree.html, which shows the intended layout (equation centered, number label to the right).
2. Load https://meyerweb.com/eric/css/tests/chrome/grid/with-degree.html in a non-Chrome browser, which shows the intended layout (equation centered, number label to the right).
3. Load https://meyerweb.com/eric/css/tests/chrome/grid/with-degree.html in Chrome, which does not show the intended layout (equation to the right, label below and centered).

Technical details:

• MathJax Version: 3.2.0
• Client OS: Mac OS X 10.14.6
• Browser: Chrome 99.0.4844.51 (Official Build) (x86_64)

[pkra]

Just a bystander here. I think the problem is that the layout is not refreshing after the DOM updates.

For example, using the developer tools, if you delete the mjx-container for "q=1" and undo that deletion, then the layout is as desired. Rendering MathJax server-side also looks fine.

Random side comment: the page has some obsolete mathjax v2 configuration (not that it matters here).

[dpvc]

When MathJax encounters a character that is not in one of its fonts, it needs to determine its size. It does so by temporarily inserting an element that contains the character so that it can be measured, and then removes the element. U+00BA is not in its fonts, and so that does cause this insertion to occur. It is not related to U+00BA in particular, but would be caused by any character that isn't in MathJax's fonts.

This insertion seems to be the trigger, though the insertion is at the point of the math containing the unknown character, which is unrelated to the location where the grid layout is, so that is strange. But MathJax does do another insertion at the location of every math item in order to measure the amount of space available for the math (for line breaking), to determine the font size (for automatic font scaling), and some other related things. That material is inserted and removed before any of the math is typeset, but I suspect that that is what is causing the column problem. The second insertion seems to be triggering it (it will have caused a repaint of the screen, and that may be the reason for the bug).

I spent a few hours trying to work around the issue, but haven't found anything that works. The only thing I can come up with is to put a <div> (or really any tag, even something like <x-mjx>...</x-mjx>) around the expression inside the figure so that the measurement insertion is inside that and doesn't cause an extra column). I know that's not great, and I'll continue to think about how to resolve it another way, but that's the best I can suggest for now.

[dpvc]

PS, if you are looking for a degree symbol (as your file names seems to suggest), you should use U+00B0 not U+00BA. Neither is currently in the MathJax fonts, but U+00BA is an underlined "o" in some fonts, and since you don't know what font the system will select, you can't be sure it won't pick one of those.

[meyerweb]

Thank you, @dpvc! I think I have enough to submit a Chromium bug, as I’m pretty sure this is on them. Feel free to close this issue, or keep it open if you want to use it to track efforts to work around the problem until Chromium is fixed.