Odd refreshing behavior

support
1

Hello!

I’ve noticed a strange behavior in a Hugo project I’m building. Apologies in advance for not being able to provide a link to a project repository, but it has to remain private.

I have a simple relref that leads to an anchor point on a page of about 6000 lines with roughly 500 headers (it’s a schemas page for an API so there’s lots of information). The page also has some short code blocks and tables in many of the different header sections. I’ve noticed the following two distinct behaviours:

  1. Clicking directly on the link lands on the page and momentarily falls at the correct anchor position before the page subsequently reloads (not sure why) and the anchor gets offset completely.

  2. This behaviour doesn’t seem to happen when I open the page in a new tab.

I’ve looked at the function calls being made in the browser to see what is different, and the only thing I notice is a livereload.js call that happens at the time of the reload happening. Currently running Hugo version 90.1.

I appreciate any help on the matter and I’ll try to provide any extra information needed as much that is at my disposal! Thank you!

2

This sounds odd. Could you try to start the server with hugo server --disableFastRender and see if that behaves differently?

3

Same behavior unfortunately. I’ve also pushed this to an azure static app to see if this was just a local bug I was experiencing but no success.

4

So, if this also happens in a static Azure version, I suspect the issue lives somewhere in your application. I initially thought this could be a live reload issue, but that is only injected when running the server.

5

Thank you for looking into it!

The pattern seems to be the lower on the list the heading in the right navigation is, the more offset there is from the actual anchor point. We did a custom right navigation so perhaps something in there is causing the offset to occur.

6

@bep My solution was to move the anchor.js script into a DOMContentLoaded event listener. With the profilers, I found that anchor.js was adding the anchors after the page was rendered, triggering a redraw that offset the page. By moving it to occur when the main page loading, there was only one render, not two.

1 Like