Skip to content

{#key} with transitions and bind:offsetWidth causes incorrect width updates when keys overlap before animation completes #17214

@MaxGurish

Description

@MaxGurish

Describe the bug

When using {#key} to trigger transitions along with bind:offsetWidth, the width is not updated correctly if a new key update occurs before the previous transition animation completes, and the new key matches an element that is already animating.

Expected behavior
When the key changes, the new element should be rendered, its dimensions measured via bind:offsetWidth, and the width state should update accordingly, regardless of whether the previous element is still animating.

Actual behavior
If the new key matches a value that is already animating (e.g., toggling back and forth quickly), the bind:offsetWidth does not update, and the width remains stale.

Reproduction

https://svelte.dev/playground/8a6cf0ff052e480da0657b2f690f2652?version=5.43.14

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-13620H
    Memory: 9.90 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: 142.0.7444.176
    Edge: Chromium (141.0.3537.85)
    Internet Explorer: 11.0.26100.1882

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions