kit
kit copied to clipboard
CSS :target selector does not work after page move
Describe the bug
CSS :target selector does not work after page move. If refreshes the page, the selector works as expected.
Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-4gcrby?file=src%2Froutes%2F%2Bpage.svelte
- go
/(if you are not on this) - click link to move to
/a#a
Actual result The box is red (:target selector not work)
Expected result The box is green (:target selector works)
Logs
N/A
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.14.0 - /usr/local/bin/pnpm
npmPackages:
@sveltejs/adapter-auto: ^3.0.0 => 3.1.1
@sveltejs/kit: ^2.0.0 => 2.5.0
@sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2
svelte: ^4.2.7 => 4.2.10
vite: ^5.0.3 => 5.1.1
Severity
annoyance
Additional Information
No response
This is a well-known issue.
Reference https://github.com/sveltejs/kit/issues/10550 and related issues.
Workaround: use the data-sveltekit-reload option.
<a href="a#a" data-sveltekit-reload>Click to test</a>