PageNav links don't scroll to the correct place in the first try

[damithc]

V5.0.2
Checked on Win 10, Edge, Firefox, Chrome

Steps:

1. Go to a long page e.g., https://nus-cs2103-ay2324s1.github.io/website/schedule/week4/topics.html
2. Click on a link in the page navigation menu on the right
3. Problem: The page scrolls to a location that is some distance above the target location.

Clicking the PageNav link again will scroll to the correct location. So, it seems to be related to some sort of dynamic load-as-you-scroll behavior of the page. Once the page is full loaded, it behaves correctly.

Not sure if this is a problem on MarkBind side or something else e.g., Bootstrap

[damithc]

This is actually a significant problem, as it causes both page and site navigation to not work as intended half the time.

[tlylt]

Could be due to https://github.com/MarkBind/markbind/pull/1953/files#diff-6ae0c610a951c1b0540c673c0f37f26de23750e00c3c85c6e92ce5ddad97b89b but we have quite a few open scrolling issues so requires investigation.

[jmestxr]

Could be due to https://github.com/MarkBind/markbind/pull/1953/files#diff-6ae0c610a951c1b0540c673c0f37f26de23750e00c3c85c6e92ce5ddad97b89b but we have quite a few open scrolling issues so requires investigation.

I don't think the issue is due to scrollToUrlAnchorHeading() executing on window load, but rather the incomplete loading of the page. Because the issue persists even after window.onload and I click on a pagenav link.

At least for Firefox, when I disabled smooth scrolling, scrolling goes to the right location again.

[jmestxr]

I have found the issue.. it's due to the lazy loading of images (https://github.com/MarkBind/markbind/pull/1626/files#diff-24facafb64e7e0d8a2517bcb3637f74523027f2a4b53986684f5bf3baf2783ba); image loads as page scrolls, resulting in inaccurate end position of scrolling.

[damithc]

Good catch @jmestxr Seems plausible. Is there a quick fix? Perhaps disable lazy loading for now?

[jmestxr]

@damithc right, fastest way is to disable it for now. Not sure if it's even possible to get img dimensions before loading, to put a image placeholder.

For now, should I just set the default value for eager prop to true, or replace eager prop with lazy prop (default to be false) for a more convenient syntax for <pic> (i.e. <pic src="..." lazy></pic> )
https://markbind.org/userGuide/components/imagesAndDiagrams.html#pictures

[damithc]

@jmestxr by right, scrolling has to work correctly even if images are set to lazy loading. So, should we get rid of lazy loading feature entirely?

[jmestxr]

@damithc sure. I'll create a PR soon.

[tlylt]

I have found the issue.. it's due to the lazy loading of images (https://github.com/MarkBind/markbind/pull/1626/files#diff-24facafb64e7e0d8a2517bcb3637f74523027f2a4b53986684f5bf3baf2783ba); image loads as page scrolls, resulting in inaccurate end position of scrolling.

@jmestxr does it mean that for existing MarkBind user if they include "eager" in their pic components the issue will be fixed for their generated website?

[jmestxr]

does it mean that for existing MarkBind user if they include "eager" in their pic components the issue will be fixed for their generated website?

yea that's right

[damithc]

does it mean that for existing MarkBind user if they include "eager" in their pic components the issue will be fixed for their generated website?

Nice, I've used that as a temporary workaround for https://nus-cs2103-ay2324s1.github.io/website/ for now