Math is broken when using Mkdocs Material theme

[sindzicat]

Context

No response

Bug description

When I use material theme, equations numbers aren't right aligned, and some equations have vertical scrollbars (see screenshots below). But when I turn off material theme, all works fine. It seems for me that there is something in theme, that make equations broken.

Related links

https://squidfunk.github.io/mkdocs-material/reference/math/

Reproduction

mkdocs-test.zip

Steps to reproduce

I created some folder, opened this folder in console and typed:

mkdocs new .

mkdocs.yml:

site_name: My Docs

markdown_extensions:
    - pymdownx.arithmatex:
        generic: true

extra_javascript:
    - ./assets/mathjax.js
    - https://polyfill.io/v3/polyfill.min.js?features=es6
    - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

docs/assets/mathjax.js:

window.MathJax = {
    tex: {
      inlineMath: [ ["\\(","\\)"], ['$', '$'] ],
      displayMath: [ ["\\[","\\]"], ['$$', '$$'] ],
      tags: 'ams'
    },
    options: {
      ignoreHtmlClass: ".*|",
      processHtmlClass: "arithmatex"
    }
  };

docs/test.md:

# Test math

$$
    \begin{equation}
        f(t) = \mu_1 f_1(t) + \mu_2 f_2(t).
    \end{equation}
$$

$$
\begin{align}
    p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
    p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
\end{align}
$$

$$
    \begin{equation}
        \begin{aligned}
            t_0 &= 0, \\
            t_1 &= 1.
        \end{aligned}
    \end{equation}
$$

mkdocs serve

Then I turn on material theme in mkdocs.yml:

site_name: My Docs

theme:
    name: material

markdown_extensions:
    - pymdownx.arithmatex:
        generic: true

extra_javascript:
    - ./assets/mathjax.js
    - https://polyfill.io/v3/polyfill.min.js?features=es6
    - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

Browser

Chrome

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[facelessuser]

There does seem to be some Material styling that is causing the effect. There is a simple workaround though. At one point, I added a feature to change the parent element for math tags (relevant reason here). Now, I don't think that issue is specifically relevant here, but the feature can allow you to sidestep Material styling.

markdown_extensions:
    - pymdownx.arithmatex:
        generic: true
        block_tag: 'pre'

I didn't know Material had this styling, nor do I know when it was added, but it has never affected me because I had been using the above configuration and was unknowingly sidestepping Material's styling.

[sindzicat]

@facelessuser, nice work! Works like a charm! Thanks a lot! 👍

[alexvoss]

@facelessuser thanks for providing the workaround. Am I reading this right that there is the general problem with the mkdocs-minify-plugin and an issue with styling in Material?

For the first, the issue with equation numbers not lining up, it might help to add your workaround to the Material for MkDocs documentation. I can see how this would be an issue a lot of people would run into. You could create the PR yourself if you fancy or I can do it.

The second issue I was unable to replicate. @sindzicat, could you do us the favour and create a minimal reproduction using these instructions so we can investigate? Your zip file already contains most of what we need but lacks information about the versions used and operating system environment. The info plugin would add those to the .zip file.

[facelessuser]

@alexvoss the minify plugin will minify content in divs. I don't recall the exact ways in which it affected things, only that it apparently annoyed me enough at one point or another and I added a feature to use a different parent element and never looked back. Unfortunately, I did not document the exact scenarios in which it could affect things, I also don't know if it still is a problem.

I could not reproduce the scroll issue, but I did reproduce the alignment issue.

As for updating the docs, I think Material should first decide if the current styling is undesirable or not I was able to see the styling and remove it during testing to get the results the poster wanted. Ideally, the default style shouldn't be surprising to people. I think that part may deserve a closer look.

[facelessuser]

If it helps, I think this CSS is what is causing the issues. I don't know if the margin or padding is an issue, but commenting out the min-content stuff helped.

.md-typeset div.arithmatex>* {
    margin-left: auto!important;
    margin-right: auto!important;
    padding: 0 0.8rem;
    touch-action: auto;
    /* width: -webkit-min-content; */
    /* width: min-content; */
}

[alexvoss]

Just adding a link to #3354 for content as this seems to be an old issue re-emerging? I was able to reproduce the scrollbar issue on Chromium on Linux, in the end. It worked fine on Firefox on both MacOS and Linux and on Chrome on MacOS. So, clearly the solution is to switch the whole world to Firefox ;o)

[sindzicat]

@alexvoss, I created minimal reproduction:

9.5.1-math-broken-6469.zip

[squidfunk]

Thanks for providing the reproduction and thanks to everybody for participating. Running the reproduction, the horizontal overflowing was even apparent on macOS, so I was able to investigate. Turns out that the mjx-assistive-mml element, which is made practically invisible through clipping is absolutely positioned and receives a height that is larger as the surrounding container, which induces the horizontal overflow. By setting this element's height to 0, the issue went away.

Thus, 00c5b0a is an attempt to fix the issue while not introducing new issues. Note that it is particularly tricky to get math rendering right on small screens, i.e., with appropriate paddings and overflow on mobile, so you can scroll overflowing formulas, which is why the mobile breakpoint still needs to receive the width override.

Could somebody running Windows check if this also fixes the issue on Windows? It doesn't happen for me on iOS and macOS anymore.

[squidfunk]

Released as part of 9.5.2.