Page doesn't start at the top.

[bora-7]

When I click an item on the sidebar, the page doesn't jump to the top, but instead starts like this

It doesn't do this in the demo website. How can I fix this?

[h-enk]

Does it help if you run:

npm run clean:build && npm run dev

[bora-7]

I just tried it. It works on google chrome, so the issue is only on Firefox as you said. I tried your branch on Firefox and the same issue persists. I also tried doing the steps you did but it unfortunately doesn't solve the issue on my machine.

[h-enk]

I really can't replicate this anymore (strangely).

Some other things, you could try:

• Next to npm run clean:build, delete hugo_stats.json before running a new build
• Add to assets/scss/common/_variables-custom.scss: $enable-smooth-scroll: false; (there's a known Firefox scroll behavior issue)
• Add content to the pages — including a <h2> header (so that the ToC gets generated)
• Start with a fresh Doks install and copy your content over

[bora-7]

The issue still persists on Firefox, even with trying all of those fixes. I wonder if there's anywhere I can add a Javascript script that scrolls to the top of the page on page load? It's a hacky fix but better than nothing.

As mentioned earlier, the issue doesn't exist on other browsers, just Firefox. Thanks for your help, I'll also help investigate the issue myself by looking at the source in a few weeks when work gets easier.

Unrelated, but where can I find more on changing the colours of the theme? I couldn't find that on this link.

[jollydodo]

I tested our website only on chrome, duckduckgo and safari which all worked perfectly fine. Then I read this topic and got curious as well with Firefox and I indeed have the same problem. Don't have time tonight to troubleshoot it further, but the behaviour is very inconsistent. Sometimes a page loads fine and sometimes it starts somewhere down on the page. Clicking around doesn't give any conclusive results yet (Thought it might be related to the content, but your pages seem empty?). Currently only 7% of our users use Firefox, but still something to consider.

Small update: clicking the same page multiple times in a row causes it sometimes to result in the mentioned error. I then checked my console and Firefox indeed has some issues (which are not present in other browsers). Maybe this might help debug since this page triggers the error after clicking on the sidebar several times:
https://www.fablabarnhem.nl/wiki/documentatie/machines/3d-printers/itomec-i500/

This is the console error that shows up:
"Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.". So I guess there is a problem with the loading of the stylesheets within Firefox. However, this error points to the flexsearch javascript in my case. I don't have a Netlify dev environment running right now, but could you perhaps turn off flexsearch and test again? (perhaps a dumb idea, but the best I can do right now. H-enk is the expert and probably has a better idea of what is going on ;) ).

(Unrelated but Firefox also triggers some other console errors related to the csp of utils.js and an unused preload of this font: “fonts/vendor/jost/jost-v4-latin-500.woff2” )

[bora-7]

Thanks for your response. I actually never thought of checking the console logs! But you are right, there are warnings logged there and the top one is about the layout. I've pasted the screenshot of the warnings I get below. You are also right that the top warning is the one causing this particular issue, since when the issue doesn't happen I don't see that log anymore (i still see the others).

[bora-7]

Has there been any update on this?

[h-enk]

When you disable FlexSearch (flexSearch = false) it all works fine — also in Firefox.

This is the failing code: https://github.com/gethyas/doks-core/blob/main/assets/js/flexsearch.js#L121

Now, it only needs a fix — to be addressed!

[davidkopp]

Thanks. Commenting out the line solved the issue. Even without the line the search box is focused. Tested with Firefox and Edge.