$layout.svelte order not respected

[blarfoon]

Describe the bug
The tags order in the $layout.svelte is not respected.

To Reproduce
This is easily reproducible. https://github.com/killpowa/svelte-layout-issue-repro
Just run npm i and npm run dev or build. Then navigate to /test by using the a link on the screen, it will work. If you reload the page while being on the /test route, the footer will not be in the correct place.

Expected behavior
I expect the tags to appear in the correct place.

Severity
I think this is pretty severe.

Additional context
It's related to svelte:head in the specific route because if you remove it, it'll work, moreover it only happens on pages with that tag.
I also noticed a similar issue on one of my projects but I couldn't reproduce it outside of that it but it's still related to svelte:head because again, if I remove it, it works. The issue is that I have duplicated content on the pages that have the head tag on reload. When navigating by using the links on the page everything works.

[dummdidumm]

This sounds related to an issue with Svelte 3.38. could you update and check if it is fixed with 3.38.1?

[blarfoon]

The version I tested it with is 3.38.1 https://github.com/killpowa/svelte-layout-issue-repro/blob/main/package-lock.json#L1066

[intrikate]

Then navigate to /test by using the a link on the screen, it will work.

I’m seeing the opposite here. As I navigate, the footer gets ahead of the slot and appears immediately after the header. However, when I reload, it appears below everything, which I’d expect from the code order. @killpowa Am I misreading it, or are we indeed seeing different things?

What adds more confusion is that it remains reproducible even after removing svelte:head from test.svelte.

[blarfoon]

Sorry for the confusion. I can confirm everything you said, the svelte:head is not responsible for this specific issue as it also happens in the index.svelte when refreshing the test.svelte and then navigating back through the link. I can confirm on the other hand that the duplication issue is related to svelte:head because removing it from a specific page doesn't cause duplication anymore on refresh. I was not able to reproduce it outside of my project yet but I'll try to reproduce it in this repo again tomorrow.

[blarfoon]

Updating to 3.38.1 actually fixed the duplicated content. Sorry for the confusion. Do you want me to close this and open a new issue specific to the $layout order not being respected?

[Bastian]

I can confirm that the mixed-up order is also present with Svelte 3.38.1.
When opening the page initially, everything looks fine, but as soon as I navigate to another side in my project, the footer is suddenly on top.

<main class="flex h-full flex-col">
    <slot></slot>
    <Footer/>
</main>

[intrikate]

Note that downgrading Svelte to 3.37.0 fixes this.

@killpowa This should most definitely remain open, as, in spite of all the confusion, the original issue was not resolved. You may want to edit the additional context part to reflect the mix-up.

[nitroboy720]

This is most likely a problem with svelte, here is the corresponding issue: Svelte #6279

[intrikate]

It must be related, but this one hydrates alright the first time and breaks later; over there, it’s the opposite.

[benmccann]

Closing as a duplicate of the Svelte issue