TOC not updating correctly in Chrome

[BartJanvanRossum]

The content menu is not unfolding as expected. More specifically, selecting the bottom item in the content list unfolds the item above and selects that item and within the item the last subitem. For https://github.com/Biometris/statgenSTA/tree/develop:

The page does still move to the correct location and manually scrolling further down, even just one line, will unfold the correct item in the content menu:

I tested this with both the CRAN version and the main github branch of pkgdown with identical results. Also there is no difference whether bootstrap 5 is used or not.

[hadley]

Even more minimal reprex: visit https://bartjanvanrossum.github.io/statgenSTA/articles/statgenSTA.html#extracting-model-results in chrome. "Model reports" is highlighted instead of "Extracting model results"

Probably something to do with scroll-padding.

[hadley]

But the problem doesn't seem to occur on https://pkgdown.r-lib.org/articles/customise.html#sidebar

[BartJanvanRossum]

The difference might be that "Extracting model results" is the last section in the TOC. In {pkgdown} the sidebar section is somewhere in the middle of the TOC. In {statgenSTA} highlighting works fine when clicking e.g. "Creating a TD object", a section with subsections higher up in the TOC.

[hadley]

Hmmmm:

• In safari, https://pkgdown.r-lib.org/articles/customise.html#conclusion highlights PR previews
• In chrome, https://pkgdown.r-lib.org/articles/customise.html#pr-previews highlights conclusion

But I think those are a case I understand — there's not enough height in the final section to scroll either the PR previews or the conclusions headings to the top of the page so which heading it shows as active is underspecified. One way to fix that would be to add adding padding to the bottom of the page so that they can be scolled.

But I don't think that's what's happening on your page because Extracting model results is a long section, and there's definitely enough room to scroll it to the top. And even for references, which isn't quite tall enough to scroll to the top, there's still only one heading visible on the page.

[hadley]

One possible issue to look into is that I should now be supplying rootMargin instead of offset: https://getbootstrap.com/docs/5.3/components/scrollspy/#options — hmmmm, but we're still only using 5.1

[hadley]

Carefully scrolling around in chrome makes me think it is an offset problem. If I jump to https://bartjanvanrossum.github.io/statgenSTA/articles/statgenSTA.html#modeling and then scroll down even slightly, it does highlight the correct heading. Currently I'm setting offset: $("nav.navbar").outerHeight() + 1, and I do wonder where that + 1 is coming from.

[hadley]

I think this is beyond my ability to debug — I think someone with deeper knowledge of js will need to read the source code of the scrollspy plugin to figure out what's going wrong 😞

(It's also possibly/probably some interaction with https://github.com/WickyNilliams/headroom.js)