Closed
Description
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
orreadthedocs
themes... the problem persists when all overrides are removed, i.e.custom_dir
,extra_javascript
andextra_css
... the documentation does not mention anything about my problem... there are no open or closed issues that are related to my problem
Description
In Firefox 97, the "Sidebars automatically scroll to active item" feature (see here) isn't working anymore.
Expected behaviour
When using Firefox 97 and the latest version of Insiders, the navigation should be scrolled into view as described here.
Actual behaviour
Navigation does not scroll into view in Firefox 97. No console errors.
Steps to reproduce
See description.
Package versions
- Python: 3.9.10
- MkDocs: 1.2.3
- Material: 8.2.1+insiders.4.9.1
Configuration
N/A
System information
- Operating system: ...
- Browser: ...
Metadata
Metadata
Assignees
Projects
Milestone
Relationships
Development
No branches or pull requests
Activity
squidfunk commentedon Feb 26, 2022
I'm not able reproduce this with the latest Firefox. Oddly enough I was when you reached out to me yesterday, but today I'm not seeing this issue anymore. Are you still able to reproduce? This video shows that both sidebars are correctly positioned:
Ohne.Titel.mp4
wilhelmer commentedon Feb 28, 2022
When I open https://docs.baslerweb.com/line-pitch on Firefox, the sidebar doesn't scroll and "Line Pitch" isn't visible in the navigation.
When I open the same URL in Chrome, scrolling works properly.
Can you reproduce that?
Our docs were last built with Insiders 4.7.0, but I'm seeing the same behaviour on staging with 4.10.0.
squidfunk commentedon Feb 28, 2022
Hmm, yes I'm seeing the same behavior on your website, but I'm still not able to reproduce it on the official docs – just checked again. My next thought was that maybe it's triggered by the sidebar having much more entries, but I'm also not able to reproduce it for the changelog which is very long, as can be seen in the video I posted in my last comment.
You have several customizations in place, could you try to remove them and see if the issue persists with a mint installation?
wilhelmer commentedon Feb 28, 2022
I removed all of the customizations and the issue persisted. I was finally able to track it down, it's related to the size of the nav object. If
nav
has too many entries, scrolling no longer works. The threshold for my project is at around 200 entries.I tried to create a dummy project but couldn't reproduce the error, maybe you need >200 different topics? I don't know. I'll keep trying ...
squidfunk commentedon Feb 28, 2022
Hmm, super weird. Thanks for your efforts. It's likely an easy fix as soon as you can reproduce it on a mint project.
wilhelmer commentedon Feb 28, 2022
Woo, I got it.
Download, unzip, build, open one of the last topics, e.g.,
index copy 170.html
.strange-nav-bug.zip
squidfunk commentedon Feb 28, 2022
Jup, confirmed. Thanks for taking the time to create a reproduction!
wilhelmer commentedon Feb 28, 2022
Yup, that was a little tricky. Hope it helps! Curious how this will turn out.
squidfunk commentedon Feb 28, 2022
I've already isolated the error – Firefox returns different values for
Element.scrollHeight
andElement.offsetHeight
on elements that do not overflow and are not scrollable, which interferes with the logic that determines the nearest scrollable container. Chrome reports the values correctly. What the...Possibly related:
squidfunk commentedon Feb 28, 2022
Fixed in
aa5602a
. I've switched to a more resilient approach to determine the overflowing container.wilhelmer commentedon Feb 28, 2022
Success! I can confirm scrolling works as advertised with the fix.
squidfunk commentedon Mar 2, 2022
Released as part of 8.2.4+insiders-4.10.1