Scrolling to hash links is broken on Chrome

[Rich-Harris]

Describe the bug

Clicking a link like https://kit.svelte.dev/docs/configuration#version should take you to that part of the page. It works in Firefox...

...but not Chrome:

Reproduction

Go to https://kit.svelte.dev/docs/configuration#version in Chrome

Logs

No response

System Info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 69.61 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Firefox: 97.0.1
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.30 
    @sveltejs/adapter-static: next => 1.0.0-next.28 
    @sveltejs/kit: next => 1.0.0-next.291 
    svelte: ^3.46.0 => 3.46.4

Severity

annoyance

Additional Information

No response

[PH4NTOMiki]

Testing fix now

[mrkishi]

You're never going to believe it, but it was introduced in #4155 somehow.

[PH4NTOMiki]

Makes sense, because it scrolls to the correct position temporary and then returns to 0

[PH4NTOMiki]

It's probably something to do with that clientHeight/Width bind, some Chrome edge-case/bug, but no idea how to fix it, maybe there is some other way to do that banner without that bind

[Conduitry]

Most of the more complicated stuff with the banner is no longer necessary with the shorter message on mobile that doesn't need to wrap. The whole thing should be able to be replaced with an HTML- and CSS-only banner that swaps out messages with media queries.

[PH4NTOMiki]

#4219 it looks like it works.

[PH4NTOMiki]

https://kit-svelte-dev-aigplkaoi-svelte.vercel.app/docs/configuration#version

[PH4NTOMiki]

I think I actually figured the root cause of the issue

[PH4NTOMiki]

Closed #4219 it was just hiding the issue, need to investigate deeper.

[Rich-Harris]

Before this block of code, the page is correctly scrolled:

kit/packages/kit/src/runtime/client/client.js

Lines 330 to 334 in cdc32a9

	root = new Root({
	target,
	props: { ...result.props, stores },
	hydrate: true
	});

After, it's reset. So it's something to do with the hydration. Trying to create a minimal repro.

[PH4NTOMiki]

I think the browser tries to scroll, but the max scroll(full page height) changes slightly when hydrated(maybe just 1 pixel) and that causes it, but how to solve it is beyond me.