not possible to use own style with transition

[dm-de]

Describe the bug

Transition generate own "style", which do not respect my style added to style-attribute.
style & transition style "collides" somehow and the transition breaks.

Reproduction

Resize window, so green sidebar is shown or hidden.

If you do this very quick (hide & show), you will see, that default size (200) is used instead of 400. This should not happen.

Remove style={style} in Side.svelte - and you will see, that it works like expected - but now, i am not able to set style this way (sidebar becomes default red).

So... if change happen slowly... style is merged correctly
if change happen quickly... style:width is not set.

App.svelte:

<script>
	import Side from './Side.svelte'
</script>

<Side size={400} style="background:#6c6;">
	content
</Side>

Side.svelte:

<script>
	import {fly} from 'svelte/transition'

	export let size = 200
	export let style = ''
	
	let trigger = 800
	let width = window.innerWidth
</script>

<svelte:window bind:innerWidth={width} />

{#if width >= trigger}
	<div
		style={style}
		style:width={size ? size + 'px' : undefined}
		transition:fly={{duration: 2000, x: -size}}
	>
		<slot/>
	</div>
{/if}

<style>
	div {
		position: absolute;
		top: 0;
		bottom: 0;
		left:0;
		width: 200px;
		background: #c66;
	}
</style>

Logs

No response

System Info

svelte 3.58.0
vite 4.1.3

Severity

annoyance

[FilipSzutkowski]

I think this could be some kind of a race condition between style and style:width in the markup. If you do this this way - REPL - it seems to fix the problem. The style:width doesn't seem to get applied sometimes for some reason.

It does seem unexpected in my opinion too though.

[dummdidumm]

Fixed in Svelte 5