Latex vertical Scroll bar bug is back

[LuciferUchiha]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

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

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

The bug from Issure484 was reintroduced. As you can see here

Expected behaviour

There is a Vertical Scroll bar next to non inline latex.

Actual behaviour

There is not a Vertical Scroll bar next to non inline latex.

Steps to reproduce

1. Write in markdown:

$$Per(n)=n!$$

2. Deploy page
3. Open page

Package versions

• Python: 3.x
• Material: 8.1.2

Configuration

site_name: George's Digital Garden
repo_name: LuciferUchiha/Digital-Garden
repo_url: https://github.com/LuciferUchiha/Digital-Garden

System information

• Operating system: Windows
• Browser: Brave

[squidfunk]

Thanks for reporting. Please provide a reproducible case.

[LuciferUchiha]

I have added a bit more Detail with a Link to some evidence

[squidfunk]

I can see the issue on your page but I'm still not able to reproduce it. Using the formula you posted, no scrollbar appears:

I'm closing this as non-reproducible as it's unclear to me whether you are using customizations that might cause the error, because you supplied incomplete information in the mkdocs.yml section. If you manage to craft a minimal reproducible example with a clean installation, I'm happy to look into it and fix it.

[slutske22]

I am having the same issue. You can see the scrollbars on my documentation's site here: https://firestarter-io.github.io/node-algorithm/algorithm/firespread/slope/

The code for this particular page can be found here: https://github.com/firestarter-io/node-algorithm/blob/rothermel-slope-aspect-ros/docs/algorithm/firespread/slope.md

If it helps, my mkdocs.yml looks like this:

site_name: name
nav:
  - About: index.md
  - Algorithm:
      - Overview: algorithm/overview.md
      - Data:
          - Types: algorithm/data/types.md
      - Fire Spread:
          - Slope: algorithm/firespread/slope.md
      - Notes: algorithm/notes.md
  - Components:
      - Campaign: components/campaign.md
      - Extent: components/extent/extent.md
      - BurnMatrix: components/burnmatrix.md
      - Cell: components/cell/cell.md
      - Priority Queue: components/queue/queue.md

theme:
  name: material
  logo: assets/flame.png
  favicon: assets/flame-docs.png
  highlightjs: true
extra_css:
  - stylesheets/extra.css
extra_javascript:
  - javascripts/config.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
markdown_extensions:
  - attr_list
  - pymdownx.superfences
  - pymdownx.arithmatex:
      generic: true
  - pymdownx.highlight:
      use_pygments: true

I'm not sure if this is the same as @LuciferUchiha 's issue, or if some external plugins / js / css may be causing the issue.

I came up with a CSS hack. In the project's extra_css, add this:

.MathJax.CtxtMenu_Attached_0 mjx-container[jax='CHTML'][display='true'] {
	margin: 0 !important;
}

That seemed to fix it for me. I'll leave the offending docs published for a little while so @squidfunk can take a look.

Short of a hacky CSS hack to stop this, I'm not sure what I might do to fix it.

[LuciferUchiha]

@slutske22 I was able to fix it by adding

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

[facelessuser]

Particularly overflow-y should be hidden. That's what I usually do. I don't usually hide the X direction. I don't often overflow in that direction, but I've never seen scroll issues related to the X direction.

[LuciferUchiha]

Correct could be slightly preciser however I haven't run into any problems yet with this solution

[akhmerov]

Adding an example that seems to reproduce the issue for me:

• Source https://gist.github.com/akhmerov/8cbb4aa3af32d318f3fda76ffb5bf603
• Generated output: https://antonakhmerov.org/misc/site.zip
• Deployed website: https://antonakhmerov.org/misc/site/

I have confirmed that the scrollbar isn't gone upon replacing the html content with the one that is known to work, nor upon replacing the stylesheet (both using browser dev tools). All the dom elements seem to have identical sizes with and without the problem.

[squidfunk]

A PR is appreciated. Note that overflow: hidden as suggested in #3354 (comment) is likely not the solution, as this will break scrolling on narrow screens when the formula exceeds the width of the viewport.

[jakobkogler]

@squidfunk Can you reopen this issue. It's not fixed yet.

[squidfunk]

Sure. If somebody manages to fix it, I'm happy to merge it.

[squidfunk]

Okay, I think I have a fix in e063108. I'm still not able to reproduce it, but #3354 (comment) was of great help, so I could copy over the generated markup to have a case to work on.

[squidfunk]

Released as part of 8.1.5. Please reopen if the issue still persists.

[Kryptos-FR]

Just to mention something I noticed in case it reappears: it depends on the web browser.

I was still on version 8.1.4 and the issue only occurred with Chrome and Edge Chromium. But on Firefox it was fine.

Since both Chrome and Edge use the same engine behind the scene (Chromium) I suspect it is a floating precision or rounding issue where a one pixel difference make it appear or not.

Note: I'm on Windows 11, I didn't try on other OS.