Chrome does not reload in dev mode with DevTools open

vikejs / vike

🔨 Flexible, lean, community-driven, dependable, fast Vite-based frontend framework.

https://vike.dev

MIT License

4.39k stars 352 forks source link

Chrome does not reload in dev mode with DevTools open #1875

Closed pdanpdan closed 2 months ago

pdanpdan commented 2 months ago

Description

Setup:

vike app in dev mode
Chrome (tested on linux)
DevTools open

Test:

reload the page (click on reload button) once => it should reload
reload the page (click on reload button) again (or 2 times at most) => it should not reload
now click in URL bar and press ENTER => it should reload

The problem would be just a nuisance but after reload I can no longer inspect the response in the Network tab of DevTools.

I traced it to the onPageHide hook that tries to execute tasks in synchronous mode on reload. https://github.com/vikejs/vike/blob/93017bedc0e5f88ff40a9b3a9b379c607576fd03/vike/utils/onPageVisibilityChange.ts#L7 A solution would be to call the listener in a requestAnimationFrame.

I know it's a Chrome problem :)

brillout commented 2 months ago

Nice digging :+1:

I'm open for a PR, but I wonder if requestAnimationFrame would break the following?

https://github.com/vikejs/vike/blob/93017bedc0e5f88ff40a9b3a9b379c607576fd03/vike/client/client-routing-runtime/setScrollPosition.ts#L81

I know it's a Chrome problem :)

Is there a bug report or Stack Overflow answer attesting that?

Closing as it isn't a Vike bug, but let's continue the conversation.

pdanpdan commented 2 months ago

I am more interested for the moment if someone else can reproduce it. For the loading inconvenience I can just patch vike in the project :)

That onPageHide(saveScrollPosition) is the culprit - it's trying to write sync in history while chrome does something else with history and all goes south.

I also reported it in chromium issue tracker but for the moment I have no feedback.

brillout commented 2 months ago

Neat. How about we disable that line for Chrome and see whether Chrome users complain about the scroll position not being restored at the right position?

pdanpdan commented 2 months ago

My findings after some more tests:

it only locks in window.history.replaceState called from saveScrollPosition called onPageHide
if in autoSaveScrollPosition function onPageHide(saveScrollPosition) is replaced with onPageHide(() => requestAnimationFrame(saveScrollPosition)) all seems to work as expected
I also tested and the scroll position is saved even if it wasn't saved by the throttled listener on scroll

So if you agree I would go on and make a PR for it.

brillout commented 2 months ago

Ok sounds good :+1: