Skip to content

Transitions cause bind:this bindings to be incorrect #8891

@robertadamsonsmith

Description

@robertadamsonsmith

Describe the bug

When bind:this is used on an element with a transition, and the element is subsequently removed, the bound value is not nulled correctly, but may become null at a later point on time instead such as when the element is invalidated for some other reason.

{#if show}
	<span bind:this={displayed_element} transition:fade>Element Content</span>		
{/if}

When show changes to false, then displayed_element does not become null when the transition starts, or even when it ends. Instead, it only becomes null when something else later causes the element to be invalidated (such as changing an unrelated variable).

This can be seen here: https://svelte.dev/repl/24ea8a9355584e8e9c1ad6b4f31bb0df?version=4.0.1

Looking at the compiled code, the problem is that the binding function (called span_binding in the repl example) is called when the element is destroyed on d() (not when the transition starts in o() as I would have expected), and then the function added to the binding_callbacks stack doesn't get called until something is later invalidated.

This can create the additional problem of incorrectly nulling the bound value, in situations where the variable has since been bound to another element. This specifically stops SvelteKit snapshots from working along with page transitions: sveltejs/kit#10224

I think that the solution might be to, in the case of blocks with an o() and i(), move the span_binding(null) call from d() to o(), and possibly add an additional span_binding(span) call to i() (so that the bound value is still correct when an outro is cancelled). I don't know if the binding_callbacks stack would then be reliably processed though, and I don't understand the compiler well enough to have a stab at implementing such a fix myself (or indeed if it would even be appropriate, considering that the compiler is undergoing a rewrite currently.)

Reproduction

https://svelte.dev/repl/24ea8a9355584e8e9c1ad6b4f31bb0df?version=4.0.1

Logs

No response

System Info

4.0.1

Severity

blocking an upgrade

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions