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.

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

"Sidebars automatically scroll to active item" feature not working in Firefox 97 #3624

Closed
5 tasks done
wilhelmer opened this issue Feb 25, 2022 · 12 comments
Closed
5 tasks done
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@wilhelmer
Copy link
Contributor

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

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: ...
@squidfunk squidfunk added the bug Issue reports a bug label Feb 25, 2022
@squidfunk
Copy link
Owner

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

@squidfunk squidfunk added needs reproduction Issue lacks a minimal reproduction .zip file and removed bug Issue reports a bug labels Feb 26, 2022
@wilhelmer
Copy link
Contributor Author

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

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
Copy link
Contributor Author

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

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
Copy link
Contributor Author

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

Jup, confirmed. Thanks for taking the time to create a reproduction!

@squidfunk squidfunk added bug Issue reports a bug and removed needs reproduction Issue lacks a minimal reproduction .zip file labels Feb 28, 2022
@wilhelmer
Copy link
Contributor Author

Yup, that was a little tricky. Hope it helps! Curious how this will turn out.

@squidfunk
Copy link
Owner

squidfunk commented Feb 28, 2022

I've already isolated the error – Firefox returns different values for Element.scrollHeight and Element.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
Copy link
Owner

Fixed in aa5602a. I've switched to a more resilient approach to determine the overflowing container.

@squidfunk squidfunk added the resolved Issue is resolved, yet unreleased if open label Feb 28, 2022
@wilhelmer
Copy link
Contributor Author

Success! I can confirm scrolling works as advertised with the fix.

@squidfunk
Copy link
Owner

Released as part of 8.2.4+insiders-4.10.1

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

No branches or pull requests

2 participants