Instant loading does not work with section anchors in Safari

[ybizeul]

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

Beginning with version 7.0.0 anchors defined on headings do not work with Safari 15.4 macOS

Expected behaviour

Clicking the the link on the TOC should jump to the section in the main content
Using a URL with # anchor should open the page at the location.

Actual behaviour

Page stays on top

Steps to reproduce

Run website and click on a H3 link on the right side

Package versions

• Python: Python 3.8.7
• MkDocs: mkdocs, version 1.1.2 from /usr/local/lib/python3.8/site-packages/mkdocs (Python 3.8)
• Material: 7.0.0

Configuration

site_name: Test Site
nav:
  - Home: /
theme:
  name: material
  features:
     - navigation.instant
markdown_extensions:
  - toc:
      permalink:

System information

• Operating system: macOS 12.3.1
• Browser: Safari 15.4

[squidfunk]

Thanks for reporting. The readthedocs theme is probably an error in your configuration, right?

[ybizeul]

Ah yes I was testing with the readthedoc theme but couldn't make it to apply not sure why.

Fixing it

[squidfunk]

Thanks! Instant loading is a feature of Material for MkDocs. The readthedocs theme has no support for it.

[squidfunk]

I'm not able to reproduce what you are describing. Anchors within the page, as well as anchors between pages work for me:

Ohne.Titel.mp4

Please provide a screencast and explain exactly what you're observing. Either I'm not yet understanding the issue you're reporting, or it does not reproduce. Note that I only have Safari 15.2 on my hands, so it might be related to that.

Furthermore, when you encounter the issue, please open the console and check if an error occurred. It might also be related to something entirely different, i.e. an error in third-party JavaScript.

[ybizeul]

Enregistrement.de.l.ecran.2022-04-04.a.19.44.47.mp4

[squidfunk]

Thanks for providing the screencast! Unfortunately, it's still not reproducible for me.

• Is there anything printed in the console?
• Could you please provide a self-contained example? You can just zip your project and attach it here

[ybizeul]

You can see the console in the screencast, nothing special.
mkdocs-materials-anchors 2.zip

[squidfunk]

I meant the browser's console 😉 Sorry for not being clear.

[ybizeul]

Ah sorry ! Nothing in the console

[ybizeul]

Were you able to reproduce the issue ?

[squidfunk]

Unfortunately not. I've tested with 7.0.0 and 8.2.8 (latest). Both are working fine. Here's a screencast with 8.2.8.:

Ohne.Titel.mp4

I'm afraid I can't put any more time into this issue, it just does not reproduce for me. I tried everything. If other users are having the same problem in the future, maybe we can find a way to create a reproduction, but this one just doesn't do it. Note that I'm running Safari 15.2 (not the latest 15.4), so it might be related to that, but until now it seems you're the only one with this problem. I'm closing this issue as not reproducible for now.

[ybizeul]

So you're not even trying to reload the page and see if it gets to the anchor ? That's what I explain in my screencast

It might be an issue with Safari 15.4 I guess.

[squidfunk]

Oh, sorry, I missed the reload. It wasn't apparent in your screencast and you did not mention it explicitly. I can reproduce it when reloading. Reopened. I'll look into it when I find some time!

[squidfunk]

So, a heads up: I'm aware of this issue, but solving it turns out to be very complex. I'm going to take this as an opportunity to refactor instant loading, which definitely needs to be simplified, also solving the issue at hand. However, I need to find enough time to do this, so I currently can't put an estimate on when this will be fixed.

In the meantime, disabling instant loading is a good workaround.

[ybizeul]

That’s what I did. Thanks for looking into this !

[squidfunk]

#5032 contains a refactoring of instant loading. I'm not sure that it's finished yet, but if you find some time for testing, that would be amazing. You can install it with:

pip install git+https://github.com/squidfunk/mkdocs-material.git@refactor/instant-loading

[feasgal]

I've had navigation.instant disabled for the last year due to the same issue. I tried the fix you linked yesterday. It seemed to solve the issue.

1. Enabled navigation.instant and checked to be sure the bug was still occurring in Safari.

   • It was. Anchor links did not work in Safari.

2. Uninstalled and reinstalled using the command line you supplied.

3. Checked to see if the anchor links now worked in Safari.

   • They did.

I didn't have time to thoroughly regression-test or anything.

[squidfunk]

The issues should be fixed in #5023. I've taken the time and did a complete rewrite of instant loading. It should be much more stable now. I'll issue a new release shortly, so we can find any remaining bugs quickly, but I'm quite confident that scroll restoration should work much better now. I've tested in Chrome, Firefox and Safari.

[squidfunk]

Released as part of 9.1.1.