Sidebar doesn't focus current page with certain resolutions

[guusw]

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

I've only noticed this issue occurring on Firefox (currently on 107.0), I managed to reproduce it in chromium too although harder to get.
Resizing the window (as small as possible helps)

Expected behaviour

Correct sidebar scrolling

Actual behaviour

Sidebar doesn't scroll to current page on some resolution/page combinations

I added some logging and it seems sometimes the scroll function picks the wrong elements, not sure how to fix though.

Correct scrolling:

Wrong scrolling:

Steps to reproduce

• Have a long sidebar with lots of items
  (- Some items also have a TOC with 1 or 2 items, although it doesn't seem to matter as it happens on those without on firefox)
• Go through the items at different resolutions, small width / height for seems to be consistent on firefox

Package versions

• Python: Python 3.10.4
• MkDocs: 1.4.2
• Material: directly from git commit 39124f9 (8.5.10)

Configuration

Check https://docs.fragcolor.xyz/docs/shards/Math/Scaling/ for an example of a non-working build.
Check https://github.com/guusw/mkdocs-bugs/tree/scroll-bug for source files that should be able to reproduce the issue

System information

Firefox 107.0 (Windows)
Chromium Version 109.0.5370.0 (Developer Build) (64-bit) (Windows)

[squidfunk]

So first of all, thanks for reporting and the excellent reproduction. It made it very simple to find the cause 👏

Now that was an interesting case, as I haven't seen such a large navigation before. Good to have that for testing. I think I have a fix in 26c08f1, as I could reproduce the problem in Firefox (and even Chrome!) before, and with the fix applied it's gone. I've pushed it to the v9 branch, so you need to install the v9 beta to check if the issue is gone.

Guidance how to install v9 in #4714 – very simple and can be done in 1min.

With instant loading, repositioning is pretty smooth, but without it's a little jaggy. I'll revisit sidebar positioning at some point, but given that what you have really is an edge case, I currently don't consider it a priority. However, improving smoothness is always something I'm aiming for.

[guusw]

I tried the same repro code, with the v9 install command and even directly from the git v9 branch (with 26c08f1)
However it still has the same issue for me on some pages.

[squidfunk]

Hmm. I can't reproduce it anymore. I'm not sure how to proceed, as logically, I don't see how it can happen anymore.

[guusw]

I'll check again later, maybe I did something wrong updating/building.