Firefox rendering issue - side menu gap

[Korzhukov]

Context

No response

Bug description

Firefox renders a gap on right side of the navigation menu. Chrome is okay.
Latest versions of everything.
See screenshot:

Related links

• Reporting a bug
• https://squidfunk.github.io/mkdocs-material/browser-support/

Reproduction

isnt screenshot enought.zip

Steps to reproduce

1. Open anything build with the latest version of mkdocs-material in Firefox
2. Resize Firefox window to hide navigation menu on the left
3. Click menu button on the top left

Browser

Firefox

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 using the built-in info plugin.

[alexvoss]

Can't reproduce this with Firefox 136.0 on MacOS. What specific version and OS are you talking about?

[kamilkrzyskow]

I can reproduce it with Firefox 136 on Windows 10. Also on GMC, which was built with an older version 9.5.8

EDIT: Modifying the width of the .md-sidebar__scrollwrap element does help.

So perhaps it's related to flex-grow again 🤔

• div.md-content.md-content-ost Vaguely changed #7984

[Korzhukov]

Can't reproduce this with Firefox 136.0 on MacOS. What specific version and OS are you talking about?

I have tested on several devices mostly with fresh Firefox 136.0 installation:
Windows 11 24H2 - issue not present
Windows 11 24H2 insider - issue not present
Windows 10 22H2 - issue present
Windows 10 22H1 LTSC - issue present
MacOS 11.7.10 (both FF 134 and 136) - issue present
MacOS 15.3.0 - issue present

EDIT:
Couple of new tests on old VMs on m2:
MacOS 14.6.1 - issue not present
MacOS 13.6.6 - issue not present

[alexvoss]

Ok, just for completeness, will add that I am using MacOS Sonoma 14.7.3.

[kamilkrzyskow]

Older sites built with mkdocs-material 7.X don't have this issue, version 8.5.10 does have it on another site, so I'm currently checking what version had this issue first.

EDIT: It first displays in 8.5.4, doesn't happen on 8.5.3
EDIT2: Out of the comparison 8.5.3...8.5.4

This change does stick out 4c8620c

EDIT3: The issue is the scrollbar-gutter: stable;, which is added always instead of within @supports selector(::-webkit-scrollbar)
This setting is visible in the screenshot above, but I never toggled it 😅

[squidfunk]

Would somebody like to propose a PR?

[squidfunk]

Well, I'm tagging this as needs help, as I can't observe this issue in Firefox on macOS:

[kamilkrzyskow]

I checked on MX Linux in a VM, and found that initially it's not reproducible there too. However, I noticed that the scrollbars have a different look than on WIndows. I searched if it's possible to restore them to a classic look and found this reddit post:

• https://old.reddit.com/r/firefox/comments/uj7ed4/any_way_to_change_the_scrollbar_back_to_the_old/

The mentioned widget.windows.overlay-scrollbars.enabled setting is the Windows variant and Settings > General > Browsing > Always show scrollbars did change the widget.gtk.overlay-scrollbars.enabled setting. Setting it to False and restarting the browser does help with the reproduction on Linux. The scrollbars still look different, but don't have a hide animation. Maybe there is a similar setting for macOS 🤔

This sort of is the expected behaviour given the MDN description https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#stable it's just that my ancient Firefox profile or maybe Windows 10 enforces the usage of the classic scrollbars, which don't hide.

I had an attempt at fixing it over the weekend, by moving the scrollbar-gutter: stable; to the ul element inside the scrollwrap did "help" by moving the padded gutter gap inside the nav tree, which shortens the horizontal border lines.

I'm not sure if this is a fix, so I got distracted and moved on to fixing the npm run build:all for Windows after all these years and will post a PR this week ✌️

[squidfunk]

Attempt to fix in #8085. It would be nice if somebody who can observe the behavior can test this PR ☺️ Sorry, @kamilkrzyskow, I just looked at the issue and the problem immediately jumped into my face. Reasoning:

Looking at the SCSS, I think we can remove the scrollbar-gutter property on breakpoints mobile and tablet (= navigation collapsed into drawer), since the area does not scroll anyway on those breakpoints. Scrolling is limited to the ul below:

[squidfunk]

Sorry, working on the open PRs, I accidentally merged the wrong one. Already reverted it and set up a new PR in #8085.

[squidfunk]

Reopening until released.

[squidfunk]

Released as part of 9.6.9.