sveltejs / sveltejs/kit

Page transitions don't work if <a> tag has target attribute set (even to '_self')

Open
#13,162 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

documentation needs-decision
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

Page transitions (achieved through a simple setup in +layout.svelte:

{#key data.pathname}
  <main in:fade={{ duration: 100, delay: 200 }} out:fade={{ duration: 100 }}>
    {@render children()}
  </main>
{/key}

will trigger when an <a> tag has no target set, but will not trigger when target is set to anything except undefined (including the default value of _self)

Reproduction

https://github.com/emmalexandria/transitions-repro

Logs

No response

System Info
System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M2
    Memory: 64.84 MB / 8.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 23.2.0 - ~/.local/share/nvm/v23.2.0/bin/node
    npm: 10.9.0 - ~/.local/share/nvm/v23.2.0/bin/npm
    pnpm: 9.14.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 131.0.6778.140
    Safari: 17.5
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/adapter-static: ^3.0.6 => 3.0.6 
    @sveltejs/kit: ^2.9.0 => 2.11.1 
    @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.2 
    svelte: ^5.0.0 => 5.13.0 
    vite: ^6.0.0 => 6.0.3
Severity

annoyance

Additional Information

In custom link components, this little nit can be worked around by passing undefined to target instead of a default value of _self.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked transitions-repro project and its +layout.svelte page-transition setup. Reproduce navigation with an tag whose target is omitted versus set to _self, then trace the relevant SvelteKit link-handling entry point; done means transitions behave consistently for both cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.