re mounting glitch (css animation re run)

[mallsoft]

Describe the bug

Intro animations are run twice / unnecessary re mount of certain nodes?

I am not sure what causes the re-mount to happen, but the order (and or structure) of nodes in +layout.svelte seems to be important.

Reproduction

1.) Run reprod locally reprod repo

2.) Reload (multiple times) in Firefox. Edge for some reason "hides" the issue somewhat (still visible but hard to catch).

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 52.32 GB / 63.92 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.4.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.52)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.89
    @sveltejs/kit: next => 1.0.0-next.557
    svelte: ^3.44.0 => 3.53.1
    vite: ^3.1.0 => 3.2.4

Severity

annoyance

Additional Information

No response

[mallsoft]

Wrapping the <slot/> in a div is also a possible workaround for some reason.

Or maybe just emphasis on the fact that the ordering / stacking of stuff seems important, even tho the end result (in dom) seems the same.

[fnimick]

I was able to reproduce with a simpler example: https://stackblitz.com/edit/sveltejs-kit-template-default-m8q8da

[fnimick]

Additional context in sveltejs/svelte#8209

[silasabbott]

I was able to reproduce with a simpler example: https://stackblitz.com/edit/sveltejs-kit-template-default-m8q8da

Nice, thanks for the reproduction.

After messing around with it, it seems like the culprit is any {#if}, {#each}, or {#key} blocks that have elements above them in the template.

• If you remove any of those blocks, the hydration issue is fixed.
• If you remove all elements above those blocks in the DOM, the hydration issue is fixed.
• The issue only happens to CSS-animated elements below those blocks. Any elements above those blocks only run their animations once.
• The {@html} block does not seem to cause or affect the issue in any way.

Updated reproduction: https://stackblitz.com/edit/sveltejs-kit-template-default-wmyryj?file=src/routes/+page.svelte

[fnimick]

@silasabbott thanks for looking - your updated reproduction doesn't seem to trigger the hydration error on my system though, no matter which of the example blocks I use?

[silasabbott]

@silasabbott thanks for looking - your updated reproduction doesn't seem to trigger the hydration error on my system though, no matter which of the example blocks I use?

Hmm, that's weird, it's happening for me as described in Chrome and Firefox (on macOS). It does not trigger on HMR, it has to be a hard refresh. Disable your cache too—in Chrome I noticed the cache sped hydration up to where it was unnoticeable.

[fnimick]

@silasabbott yup, disabling cache made it happen again - thank you! Can confirm that it's happening.

This is wild - I wonder how many of my "failed reproductions" were silently failing to hydrate and it was fast enough with cache that I didn't notice?

[0xMihir]

This bug is present on my personal website: mihirpatil.me (https://github.com/0xMihir/personal-website/). I narrowed the issue down to a single if block in the Navbar component. It's a lot easier to reproduce if you throttle the connection through devtools and force reload. Any ideas what's causing this?