Issue involves experimental.async and timing inconsistencies in reactive updates.
The issue involves transition animations breaking when experimental.async is enabled due to premature evaluation of {#if} blocks. The problem appears to be related to timing or scheduling inconsistencies in reactive updates and keyed block re-instantiation. The maintainer has noted confusion about the expected behavior, indicating potential blockers in understanding the issue fully.
First, a quick note: the unusual implementation in the REPL is necessary for bind:offsetWidth to work correctly in my use case, though this detail isn’t directly relevant to the issue at hand.
Issue Summary: When the counter updates (triggering a re-creation of the {#key} block), the {#if} block immediately applies the condition using the latest value of the state - bypassing the intermediate or expected rendering steps.
This suggests a timing or scheduling inconsistency in how reactive updates and keyed block re-instantiation interact when experimental.async is enabled.
https://svelte.dev/playground/d6d94071b1554fc4802b8e2371e438fe?version=5.46.1
System:
OS: Windows 11 10.0.26100
CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-13620H
Memory: 14.54 GB / 31.70 GB
Binaries:
Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
npm: 11.2.0 - C:\Program Files\nodejs\npm.CMD
bun: 1.2.12 - C:\Users\guris\.bun\bin\bun.EXE
Browsers:
Chrome: 143.0.7499.170
Edge: Chromium (141.0.3537.85)
Internet Explorer: 11.0.26100.7309
annoyance
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!