10000 Missing scrollbar on latest Debian's Firefox ESR · Issue #3346 · squidfunk/mkdocs-material · GitHub
[go: up one dir, main page]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Missing scrollbar on latest Debian's Firefox ESR #3346

Closed
5 tasks done
alkisg opened this issue Dec 13, 2021 · 11 comments
Closed
5 tasks done

Missing scrollbar on latest Debian's Firefox ESR #3346

alkisg opened this issue Dec 13, 2021 · 11 comments
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@alkisg
Copy link
Contributor
alkisg commented Dec 13, 2021 •
edited
Loading

Contribution guidelines

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...

VirtualBox_bullseye-kde_13_12_2021_12_30_17
@squidfunk
Copy link
Owner
squidfunk commented Dec 13, 2021 •
edited
Loading

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.

@squidfunk squidfunk added the needs input Issue needs further input by the reporter label Dec 13, 2021
@alkisg
Copy link
Contributor Author
alkisg commented Dec 13, 2021

You are correct. The console error message is:

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

@squidfunk
Copy link
Owner

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>

@squidfunk squidfunk added bug Issue reports a bug not fixable Issue concerns an unfixable bug and removed needs input Issue needs further input by the reporter labels Dec 13, 2021
@alkisg
Copy link
Contributor Author
alkisg commented Dec 13, 2021

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
Copy link
Owner

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

@alkisg
Copy link
Contributor Author
alkisg commented Dec 13, 2021

Yes, indeed it works!

@squidfunk
Copy link
Owner

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
Copy link
Contributor Author
alkisg commented Dec 13, 2021

After the following command, everything seems fine:

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

@squidfunk
Copy link
Owner

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

@squidfunk squidfunk removed the not fixable Issue concerns an unfixable bug label Dec 13, 2021
@squidfunk squidfunk reopened this Dec 13, 2021
@squidfunk
Copy link
Owner

Fixed in dea3ad8.

@squidfunk squidfunk added the resolved Issue is resolved, yet unreleased if open label Dec 13, 2021
@squidfunk
Copy link
Owner

Released as part of 8.1.1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alkisg @squidfunk
0