Browser refresh makes page go to top of site, then scrolls down

[bdlowery]

Is this normal behavior?

If i'm scrolled down halfway on a page editing some js code, save, (codekit refreshes), the page will reload, start at the top of the screen, then auto scroll down to where I last was.

This doesn't happen when I'm working inside a vue / react / svelte project. Is this because those use HMR, while codekit is rebuilding the entire application every time?

[bdkjones]

I’m unfamiliar with how vue and react manipulate the DOM on page load, but I suspect that’s the cause. When CodeKit refreshes the page on a non-stylesheet change, it waits a brief period (less than a second), then attempts to restore the same offset from the top. If the DOM isn’t loaded at that point, or if the CMS is manipulating the DOM to add/modify elements, it’s likely causing a conflict with the event CodeKit fires to restore the viewport offset.

[bdkjones]

As for the brief flash to the top: that’s expected. I have to wait a short bit for the DOM to be ready before attempting to reset the scroll offset—when I tried to do that immediately, the scroll offset would often fail because the DOM wasn’t finished yet. That WAS 8 years ago, though, so it’s possible I could shorten the delay for modern hardware and browser engines.