Missing scrollbar on latest Debian's Firefox ESR

[alkisg]

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

On the latest Debian stable with Firefox ESR 78.14, the sidebar doesn't show any scrollbars.

This means that users can't see all of our menu and can't navigate properly.

Expected behaviour

A scrollbar should appear.

Actual behaviour

A scrollbar doesn't appear.

Steps to reproduce

1. Install the latest Debian Bullseye
2. Visit this site with Firefox
3. Try to see all the menu at the left; it's not possible.

Package versions

• Python: 3.9.9
• MkDocs: 1.2.3
• Material: 8.1.0

Configuration

-

System information

• Operating system: Debian Bullseye
• Browser: Firefox ESR

Attaching a screenshot where you can see that the scrollbar doesn't exist.

Note that in the screenshot, a second issue appears, that rarely happens: when scrolling up with the mouse "too much", something malfunctions and the bottom bar gets scrolled. I should probably file a different issue for this, but I thought I'd upload the screenshot now as it's rare to reproduce it...

[squidfunk]

Thanks for the screenshot. My guess is that the scrollbar is not the problem. The problem is that there's likely some error in the console that will hinder the JavaScript from mounting the sidebar. Please check the console and see whether there's anything there that helps to understand the source of error.

[alkisg]

You are correct. The console error message is:

Uncaught DOMException: Element.closest: ':not(td.code) > .highlight, .highlighttable' is not a valid selector

[squidfunk]

Thanks for checking the console. I'm quite astonished that this throws in Firefox because Element.closest has been supported since Firefox 35. I don't see how the selector should be invalid. Thus, this is very likely a browser bug. Your options:

• Update Firefox, latest version is 94. 78 is 1,5 years old. It's always a good idea to keep evergreen browsers updated.
• Fork the theme and patch the selector list to work around it.

Testing it in Firefox 94 in the console works nicely BTW:

document.querySelector(":not(td.code) > .highlight, .highlighttable")
// => <div class="highlight">...</div>

[alkisg]

The problem seems to be the :not CSS operator, it needs very very recent browsers:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not

I.e. a plain document.querySelector(":not(td.code)") raises the exception.

[squidfunk]

Okay, one final idea – we might split it into the super ugly :not(td):not(.code). Does that work in the console?

[alkisg]

Yes, indeed it works!

[squidfunk]

Then try to patch the bundle.******.js file first, checking if there are any other obstacles. If there aren't, we can change that line.

[alkisg]

After the following command, everything seems fine:

sed 's/:not(td.code)/:not(td):not(.code)/' -i assets/javascripts/bundle.*.min.js

[squidfunk]

Ok great, we can integrate this into the code base, as it's a simple fix.

[squidfunk]

Fixed in dea3ad8.

[squidfunk]

Released as part of 8.1.1.