sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.43k stars 1.88k forks source link

CSS :target selector does not work after page move #11848

Open hyeonseok opened 7 months ago

hyeonseok commented 7 months ago

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

  1. go / (if you are not on this)
  2. 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

hyunbinseo commented 7 months ago

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>