Instant loading: Page reload on repeated page link click (Firefox)

[sisp]

Context

No response

Bug description

When navigation.instant is enabled

theme:
  name: material
  features:
    - navigation.instant

clicking repeatedly on the same page link reloads the page from scratch without XHR. Clicking on other page links works as expected.

This problem occurs in Firefox but not in Chrome. That said, both Firefox and Chrome enable the "Go forward one page" button next to the address bar when clicking on the same page link repeatedly. It seems that an incorrect entry gets added to the history.

Related links

• Reporting a bug
• Setting up navigation

Reproduction

9.4.2-xhr-reload.zip

Steps to reproduce

1. Open the reproduction in Firefox: http://localhost:8000
2. Open Firefox' dev tools and go to the "Network" tab.
3. Alternately click on the navigation links "Page" and "Home" and observe XHR requests but no page reloads.
4. Repeatedly click on the same navigation link, e.g. "Page", and observe page reloads as well as the "Go forward one page" button next to the address bar enabled.

Browser

Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[alexvoss]

Thanks for the reproduction. I see the same behaviour. When clicking on Page, XHR works as expected but when hitting the same link again I get a page reload. I turned off live reloading on mkdocs and caching in the browser to avoid them interfering in some way.

In addition, when initially loading the homepage, I get an request to /page from initiator other? Not sure why that would be. I am not touching the link and I do not get any such request in Safari.

I note that this request is listed as blocked, so I turned off "strict mode" in Firefox and reloaded but this did not make a difference, it seems. Hope some of this helps.

[squidfunk]

@alexvoss thanks for verifying the reproduction. Could you try incognito mode in Chrome? There might be some browser extension that interferes. In incognito mode all browser extensions are turned off. If it still happens, we need to look into that as well.

[alexvoss]

Using incognito (in Firefox), I get the same behaviour. I would have said the event handler does not get re-bound when replacing the page fetched using XHR but it does work when loading other pages, just not when hitting the link for the page already loaded.

[squidfunk]

Okay, so I invested an hour without success. There are still several problems with instant navigation that we can't easily address without adding further bandaids. Getting all cases right in all browsers is quite a challenge due to the many possible interactions there are. I already added a hack that omits a new flickering that happens rarely in 4743c1b since we generalized the meta tag replacement logic.

I'm going to need some more time to tackle the problem reported and will take the opportunity to do another refactoring of instant navigation. The focus will be stable meta tag replacement and stable anchor and link detection/deduplication. If somebody wants to take a shot at this, happy to collaborate on a PR. Instant navigation is extensively documented.

[squidfunk]

Using incognito (in Firefox), I get the same behaviour. I would have said the event handler does not get re-bound when replacing the page fetched using XHR but it does work when loading other pages, just not when hitting the link for the page already loaded.

Clicks are intercepted at the document.body for the following reason: you would need to rebind all event handlers for all links which is very expensive. For this reason, we just let all events bubble up the tree and catch them there:

mkdocs-material/src/templates/assets/javascripts/integrations/instant/index.ts

Lines 156 to 163 in bc9cdb5

	// Intercept inter-site navigation - to keep the number of event listeners
	// low we use the fact that uncaptured events bubble up to the body. This also
	// has the nice property that we don't need to detach and then again attach
	// event listeners when instant navigation occurs.
	const instant$ = fromEvent<MouseEvent>(document.body, "click")
	.pipe(
	withLatestFrom(sitemap$),
	switchMap(([ev, sitemap]) => {

[johnthagen]

I wasn't sure where else to report this, but I have a rather large mkdocs projects (unfortunately can't share it) where starting with mkdocs-material 9.4.3, navigation.instant started causing links during mkdocs serve to stop working.

What it looks like when navigation.expand is enabled, clinking on the first navigation link will de-expand all of the other categories, and then after that clinking on links within the pages themselves will change the URL at the top of the page but doesn't change the page. But this doesn't happen if we serve the docs statically behind NGINX.

Disabling navigation.instant fixes the problem all together without any other changes in configuration.

I've been trying to reproduce this issue on a smaller, minimal example with no luck yet. I will continue to see if I can create a minimally reproducible example. I wanted to at least report it here.

Environment

• Python 3.10.11
• macOS x86-64

Package                    Version 
-------------------------- ---------
argcomplete                3.1.2
Babel                      2.13.0
beautifulsoup4             4.12.2
certifi                    2023.7.22
charset-normalizer         3.3.0
click                      8.1.7
colorama                   0.4.6
colorlog                   6.7.0
distlib                    0.3.7

filelock                   3.12.4
ghp-import                 2.1.0
idna                       3.4
Jinja2                     3.1.2
lxml                       4.9.3
Markdown                   3.5
MarkupSafe                 2.1.3
mergedeep                  1.3.4
mkdocs                     1.5.3
mkdocs-htmlproofer-plugin  1.0.0
mkdocs-macros-plugin       1.0.4
mkdocs-material            9.4.6
mkdocs-material-extensions 1.2
mkdocs-video               1.5.0
nox                        2023.4.22
nox-poetry                 1.0.3
packaging                  23.2
paginate                   0.5.6
pathspec                   0.11.2
pip                        23.0.1
platformdirs               3.11.0
Pygments                   2.16.1
pymdown-extensions         10.3
python-dateutil            2.8.2
PyYAML                     6.0.1
pyyaml_env_tag             0.1
regex                      2023.10.3
requests                   2.31.0
setuptools                 67.6.1
six                        1.16.0
soupsieve                  2.5
termcolor                  2.3.0
tomlkit                    0.12.1
urllib3                    2.0.6
virtualenv                 20.24.5
watchdog                   3.0.0
wheel                      0.40.0

  features:
    - content.code.annotate
    - content.code.copy
    - content.tabs.link
    - navigation.expand
    - navigation.footer
    - navigation.instant
    - navigation.top
    - navigation.tracking
    - search.highlight
    - search.share
    - search.suggest
    - toc.follow

Bisection

• 9.3.2: No bug
• 9.4.0: No bug
• 9.4.1: No bug
• 9.4.2: No bug
• 9.4.3: Bug begins
  • Maybe unrelated but I also noticed that on this version: Updating regex (2022.10.31 -> 2023.10.3)
• 9.4.6: Bug still present

Perhaps one of:

• 4743c1b
• f8fd537

[squidfunk]

Thanks for noting, @johnthagen. We definitely need to observe the error on a minimal reproduction to fix it.

[johnthagen]

@squidfunk I was able to bisect down my particular issue to

• Setting dev_addr to localhost breaks navigation.instant as of 9.4.3 #6204

[SeppeHannen]

I'm having the same issue with Microsoft Edge.

[squidfunk]

Fixed in https://github.com/squidfunk/mkdocs-material-insiders/pull/79 – the fixes are currently only in Insiders, so anybody having access can already test them. I still need to do some minor refactoring that shouldn't impact the functionality, and after that, I'll backport the fixes to the community edition. I just wanted to give them into the hands of users as soon as possible. This should resolve all known problems with instant loading, at least I've tested this and all other issues.

[squidfunk]

Fixes are now in #6662. Please check if the errors are now fixed when using this version in your project:

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

[squidfunk]

Released as part of 9.5.5.