Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
[Async] Transition animations break with experimental.async enabled due to premature {#if} evaluation | GoodFirstPicks

[Async] Transition animations break with experimental.async enabled due to premature {#if} evaluation

sveltejs/svelte 1 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeSvelteTypeScript

Why this is a good first issue

Issue involves experimental.async and timing inconsistencies in reactive updates.

AI Summary

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.

Issue Description

Describe the bug

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.

  • If I use the key directly (without an update counter), the logic works as expected—but this approach breaks bind:offsetWidth, which is why I can’t use it.
  • Disabling experimental.async also resolves the issue and restores correct behavior.

This suggests a timing or scheduling inconsistency in how reactive updates and keyed block re-instantiation interact when experimental.async is enabled.

Reproduction

https://svelte.dev/playground/d6d94071b1554fc4802b8e2371e438fe?version=5.46.1

Logs

System Info

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

Severity

annoyance

GitHub Labels

awaiting submitter

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • experimental.async
  • timing/scheduling inconsistency
Loading labels...

Details

Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno