Page transitions don't work if <a> tag has target attribute set (even to '_self')
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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