kit
kit copied to clipboard
sveltejs
SvelteKit concatenates pages instead of swapping them on navigation
Describe the bug
When navigating from page A to another, if a Tiptap textfield is focused, SvelteKit completely breaks. Instead of swapping the page, the new page is simply concatenated with the current page. If this text field is not focused, the pages get concatenated only until the out transitions present in page A finish.
Reproduction
- Open this SvelteLab
- Go to child page
- Go back (Alt + ←)
- (1) Why do the pages get concatenated for the duration of the transition?
- Go to child page again
- Click in the middle of the black box to focus the text field
- Go back (Alt + ←)
- (2) Pages remain concatenated forever
Video:
https://github.com/user-attachments/assets/97ec8fce-7139-44dd-9f1d-d42cbd0cfccf
Related: #12547
Severity
very serious, can't work around it but doesn't always happen
Additional Information
For context, in my project there are two pages: Home and Board.
When I navigate to Home from Board, if the text field is currently focused, not only the pages get concatenated as seen before, but afterwards, every Svelte transition of both pages also breaks/gets stuck and a hard refresh is the only way out. Not sure if related, but my Board page has to be set to CSR only because the SSR result is completely unusable and hydration breaks.
Upgrading to Svelte 5 fixes the main glitches, although there are still some issues and I haven't tested properly.
See here for the Discord discussion regarding this issue: https://discord.com/channels/457912077277855764/1269649724873637968/1269649724873637968
The transition/concatenation part seems to be very similar to #628. Although the bug that the first page never dissappears is totally different. Still, I wish there was a way to have global transitions that are not affected by navigation, or to at least have the transitions out play, only then the new page is added. Concatenating the pages doesn't page a lot of sense, especially with layouts.
