Svelte 5: slide transition blocks scroll when element overflow

[epfn]

Describe the bug

Slide transition blocks scroll when element overflow on Svelte 5. REPL
Works fine on Svelte 4. REPL

Reproduction

<script>
	import { slide } from 'svelte/transition';
	let open = false;
</script>

<button on:click={()=> open = !open}>toggle</button>

{#if open}
	<div class="list" transition:slide>
		{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number}
			<div class="item">{number}</div>
		{/each}
	</div>
{/if}

<style>
	.list {
		width: 100px;
		max-height: 100px;
		display:flex;
		flex-direction: column;
		overflow: auto;
	}

	.item {
		height: 50px;
		width: 50px;
		background: gray;
		color: white;
	}
</style>

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Memory: 22.28 GB / 31.94 GB
  Binaries:
    Node: 20.8.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.9.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (119.0.2151.93)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: 5.0.0-next.17 => 5.0.0-next.17

Severity

annoyance

[adiguba]

Hello,

I don't known why, but it seem that the animation is not really ended, but only paused.
So the element keeps the last state of the animation...

Example here : REPL

The button "playState" show the state of the animation, and it's "paused".

A similar code in Svelte 4 will show "(no anim)" as getAnimations() return nothing.

[adiguba]

I think that I found the cause.

On transition.js line 313-318 we have this code :

			animation = dom.animate(keyframes, {
				duration,
				endDelay: delay,
				delay,
				fill: 'both'
			});

=> The animation is created using fill: 'both', which preserves the state of the animation when it's finished.

I cannot verify that, but I see 2 possibles fix :

• using fill: 'none' instead of fill: 'both' (line 317)
• using (animation).cancel(); instead of (animation).pause(); on onfinish() (line 324)