Blank appears at the bottom of the page when the HTML file contains specific formulas

Issue Summary

When I included a 4-line formula containing \tag in the HTML file, the scroll bar appeared (it should not have appeared because the height of this formula is much smaller than the screen height). And this only happens in Microsoft Edge. I'm confused.

Steps to Reproduce:

Create a file a.html with the following content

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>
      $$
      \begin{align*}
      &xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx \\
      ={}& xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx \tag{a} \\
      ={}& xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx \tag{b} \\
      ={}& xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx \tag{c}
      \end{align*}
      $$
    </p>

    <script>
      MathJax = {
        tex: {
          inlineMath: [['$', '$']]
        },
      };    
    </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js" defer></script>
  </body>
</html>

Open it in Microsoft Edge

Technical details:

MathJax Version: 3.2.2
Client OS: Windows 11
Browser: Microsoft Edge 117.0.2045.60

Supporting information:

MathJax inserts a visually hidden MathML version of the mathematics so that assistive technology that understands mathML can use that to read the mathematical output. Browsers that have native MathML rendering support will typeset that MathML, and the assumption is that the size of the rendered MathML will be approximately that of the MathJax-rendered expression. Unfortunately, in this case, that isn't true, and it is the invisible MathML that is causing the excess height.

Recent versions of Edge, Chrome, and Opera (and any other Blink-based browsers) have included new support for MathML notation. This implements the MathML-core specification, which doesn't include everything from MathML3, which is what MathJax is based around. In particular, MathML-core does not include the mlabeledtr element that is used to handle tagged expressions, like the numbered equations in your example. Because that is not implemented, the native MathML output for it is not correct, and it turns out that, in the final column of the alignment, each "x" ends up on its own line, making the alignment much taller than it should be. That leads to the scroll bars you are seeing.

Luckily, this can be fixed in CSS in several ways.

First, you could add

mlabeledtr {
  display: table-row;
}

which would make the mlabeledtr act like a plain mtr. (The label would end up being the first column of the output, but at least the entries in the other columns would be correct.)

Alternatively (or in conjunction) you could use

mjx-assistive-mml {
  right: 0;
  bottom: 0;
}

so that the assistive-MathML output will always cover the same space that the MathJax typeset version does.

mathjax / MathJax