SSR does not match CSR HTML when {#each} block next to inline elements. (Extra spaces inserted.)

[Leftium]

Describe the bug

Server-side-rendered HTML does not match client-side-rendered HTML when an {#each} block is next to inline elements. (Extra spaces inserted.) This causes the layout to "jump."

It seems to matter if there are inline elements before and/or after the {#each} block.

Reproduction

1. Go to https://kit-demos-git-ssr-csr-bug-leftium.vercel.app/.
2. Observe button layout.

Expected: Button layout doesn't shift and is consistent between cases.

Actual: Button layout shifts and spacing is inconsistent between cases. (Specifically case A vs case D)

Source: https://github.com/Leftium/kit-demos/tree/ssr-csr-bug

---

Real-world example of bug: https://multi-launch-lusvcmx44-leftium.vercel.app/
Source: https://github.com/Leftium/multi-launch/tree/7017891858fcb8f8a495a4a4dbc208f83402c7be

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 8.38 GB / 23.86 GB
  Binaries:
    Node: 18.9.0 - D:\dropbox\a\nodejs\64v18.9.0\node.EXE
    Yarn: 1.22.18 - D:\dropbox\home\.yarn\bin\yarn.CMD
  Browsers:
    Edge: Spartan (44.22621.1105.0), Chromium (110.0.1587.50)
    Internet Explorer: 11.0.22621.1

Severity

annoyance

Additional Information

No response

[Leftium]

I was able to work-around the issue in my project by consolidating all the lines of the {#each} blocks into a single line without any inline spaces, then letting prettier format it into multiple lines. The result looks like this:

{#each searchGroups as searchGroup}<div>
		<button on:click={searchGroup.handleClickAll}>All {searchGroup.name}</button
		>{#each searchGroup.engines as engine}<button
				class="secondary"
				on:click={engine.clickHandler}
				disabled={engine.getUrlTemplate(query) === ''}>{engine.name}</button
			>{/each}
	</div>{/each}

It's harder to read, but the layout no longer shifts.

Relevant commit: Leftium/multi-launch@f50a911

[dummdidumm]

This is no longer reproducible in Svelte 5 - though the whitespace handling has changed slightly in general. Closing for this reason - if there's another whitespace SSR/CSR discrepancy, please open a new issue.