Vertical scrollbars on MathJax formulas in material version 6.1.7

[fjp]

• I've read the contribution guidelines and agree with them

I've found a bug and checked that ...

• ... the problem doesn't occur with the default MkDocs template
• ... the problem is not in any of my customizations (CSS, JS, template)
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

The following formula shows a vertical scrollbar using MathJax. I know there exist other related issues to this (for example: #2048 and #484) which solve this but the problem seems to be still there:

$$
v_i = \frac{\Delta s_i}{\Delta t_i}
$$

You can find the documentation where this happens hostet here using github-pages:
https://fjp.at/diffbot/theory/motion-and-odometry/#distance-velocity-and-time

I tested locally with the default mkdocs theme and there it works, no scrollbars appear.

I am using a custom_dir for the required javascript and added arithmatex in my mkdocs.yml

Expected behavior

No vertical scrollbars on mathjax formulas

Package versions

• Python: python --version: 3.8.5
• MkDocs: mkdocs --version: 1.1.2 from /home/fjp/.local/lib/python3.8/site-packages/mkdocs (Python 3.8)
• Material: pip show mkdocs-material | grep -E ^Version: 6.1.7

Project configuration

theme:
  name: material
  highlightjs: true
  custom_dir: docs/custom_theme

markdown_extensions:
  - admonition
  - pymdownx.arithmatex:
      generic: true

System information

• OS: Ubuntu 20.04
• Browser: Tested with Chromium, Chrome, Firefox

[squidfunk]

Thanks for reporting. I can reproduce this on iOS Safari, but not on macOS (which is the system I'm using). It's definitely a bug, but should be easy to fix.

[squidfunk]

Could you try to apply the following extra CSS to see whether the error goes away?

.md-typeset div.arithmatex {
  overflow: initial;
  overflow-x: auto;
}

[fjp]

Thank you @squidfunk for the snippet. Unfortunately this doesn't seem to help, the scrollbars appear unchanged. I have added your css inside a new scroll.css of the docs/css/ folder. Then in the main.html I use:

{% block styles %}
    {{ super() }}
    <link rel="stylesheet" href="{{ base_url }}/css/scroll.css">
{% endblock styles %}

I have also tried with extra_css option in my mkdocs.yml:

extra_css:
  - docs/css/scroll.css

After serving it locally with mkdocs serve the scrollbars are still here unfortunately and nothing seems changed. Did I forget to configure something?

However, I can also confirm that it works (even without applied css changes) on macOS. Only Ubuntu 20.04 shows the scrollbars. Don't know about Windows.

[squidfunk]

The link might be incorrect - you don't need the docs prefix. Can you check and make sure that your extra CSS file is correctly loaded by the browser, i.e. It doesn't 404?

See https://squidfunk.github.io/mkdocs-material/customization/#additional-css

[fjp]

Thank you @squidfunk for the hints. I tried without docs prefix and checked that the css is in the source by inspecting with chrome. The line: <link rel="stylesheet" href="../../css/scroll.css"> is in the page source but the scrollbars are still here:

[squidfunk]

The selector in my last potential fix wasn't correct. I think I may have a fix. I tested with Firefox and IE on Windows, and while I couldn't reproduce the scrollbars, the formula was slightly cut off. Removing the overflow in afff64d fixed it.

You can either try and check the latest master, or add the following additional CSS:

.md-typeset div.arithmatex > * {
  overflow: initial;
}

[squidfunk]

So @facelessuser was so nice to check whether the problem you described happens on the official docs on Ubuntu/Firefox and it doesn't. There's no vertical scrollbar shown, even without the fix. Thus, the problem might be related to your customizations, or we just didn't manage to find out the full Markdown you used.

I'm closing this issue as not reproducible. In case the issue persists, please provide a minimal, reproducible test case, including Markdown and MkDocs configuration on a mint Material installation, i.e. without customizations.

[squidfunk]

Ha! I managed to reproduce it, I should have used your example from the start 🤦‍♂️ So it seems it doesn't happen with the examples used in the official docs, but the formula needs to have a certain height, so the overflow is triggered.

However, I was finally able to test my fix, and it seems to get rid of the issue!

[fjp]

Awesome, thanks @squidfunk. I tried with your CSS and it works perfect, no scrollbars anymore 👍

Will this fix be in the next release and do you know when it will be released on https://pypi.org/project/mkdocs-material/? So that I don't need the extra css.

[squidfunk]

Yes, it will be part of 6.2.3. I issued three releases today, including the all-new navigation stuff from Insiders, so I suggest we wait for a little and let things cool down, and include some bugfixes for issues that might be the result of the latest changes.

Give it a few days.

[squidfunk]

6.2.3 was just released.

[JoschD]

Hey, sorry to beat on dead horses, but could it be that something has changed?
I am getting the same issue when enabling the mathjax "reload" function (as from the docs):

document$.subscribe(() => {
  MathJax.typesetPromise()
})

So if this is active, there are the scrollbars again (on some equations).
I was able to fix it, not with your exact css but with:

.md-typeset div.arithmatex {
  overflow: initial;
}

I can open an issue or just leave it here for people to find and fix it themselves ;)

As always: Thanks for all your work! Mkdocs-material is amazing!!