transition:fade|global leaves the block visible in the off state

[Serator]

Describe the bug

I'm working on a fairly complex UI and below is a highly simplified example of what causes the error.

Here's what's going on:

• After the page loads, we have 2 states: fetching = false and isShown = true.
• After a second we set isShown = false and redirect to the same page (in the real app the page is different).
• Before starting navigation we set fetching = true and after 50ms we set fetching = false (emulate the request).

The red square is expected to be hidden since fetching = false and isShown = false, but it remains visible.

Note that the inner red block is used with the global modifier. In the real app this code is in a separate component.

iShot_2025-03-25_01.02.26.mp4

Reproduction

Repro (Svelte 5.25.3 / SvelteKit 2.20.2) ❌

Severity

annoyance