Repository: svelte
Issue: [transition] Crossfade Positioning Issues with `position: fixed` During the Transition Delay
Labels: transition/animation

### Describe the bug

I'm encountering a positioning issue with the crossfade transition in Svelte when one of the elements involved in the transition is inside a fixed container, and the other is not. If a user scrolls during the delay period before the crossfade begins, the transition positioning becomes inaccurate. This issue seems to arise because the crossfade function calculates the positions of the elements before the delay, and these positions do not update to reflect changes caused by scrolling.

This issue only occurs when one of the elements is in a fixed container.

This issue affects for example crossfading an element from a scrollable dialog back to the main body.

### Reproduction

https://svelte.dev/repl/4ce6f4a74ef442259bc4eb779dad2452?version=4.2.9

And here is the same example but without position fixed that has no issues
https://svelte.dev/repl/c45aaee3c42d4567884cd22978a9a843?version=4.2.9

Here is a quick video showing the bug: after triggering a crossfade transition, if you scroll within the delay period, the crossfade positioning is off. And this only happens if one of the items is within a different scrolling container

https://github.com/sveltejs/svelte/assets/53095479/7eac211e-6951-456c-a164-f036c200ad95

If you don't scroll during the delay period, everything is fine.


https://github.com/sveltejs/svelte/assets/53095479/0be75d3b-6714-4436-b165-5280f04de594


```svelte
<script lang="ts">
	import { crossfade } from 'svelte/transition';

	const [send, receive] = crossfade({ duration: 1000, delay: 1000 });

	let toggle = false;
	const imgUrl = 'https://images.unsplash.com/photo-1569428034239-f9565e32e224';
</script>

<div style="display: flex; height: 200vh; flex-direction: column; padding: 80px;">
	<div>
		<button
			on:click={() => (toggle = !toggle)}
			style="background-color: #27272a; color: white; padding: 40px 60px; font-size: 40px; border-radius: 20px; margin-bottom: 20px;"
		>
			Toggle
		</button>
		{#if !toggle}
			<img
				src={imgUrl}
				style="width: 500px; border-radius: 40px; display: block;"
				alt=""
				in:receive={{ key: 'shared' }}
				out:send={{ key: 'shared' }}
			/>
		{:else}
			<!-- svelte-ignore a11y-click-events-have-key-events -->
			<!-- svelte-ignore a11y-no-static-element-interactions -->
			<div
				on:click={() => (toggle = !toggle)}
				style="position: fixed; inset: 0; background-color: rgba(0,0,0,.5);" <-------- position fixed breaks crossfade if scrolling during delay
			>
				<img
					src={imgUrl}
					style="position:absolute; left: 25%; top: 25%; width: 500px; border-radius: 40px;"
					alt=""
					in:receive={{ key: 'shared' }}
					out:send={{ key: 'shared' }}
				/>
			</div>
		{/if}
	</div>
</div>
```



### Logs

_No response_

### System Info

```shell
System:
    OS: macOS 13.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 28.70 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.11.0 - /usr/local/bin/pnpm
    bun: 1.0.22 - ~/.bun/bin/bun
  Browsers:
    Chrome: 120.0.6099.109
    Edge: 114.0.1823.82
    Safari: 16.5.2
  npmPackages:
    svelte: ^4.2.7 => 4.2.8
```


### Severity

blocking an upgrade