Fade-in transition showing flash of visible content before fading in

[phocks]

Describe the bug

In Svelte 5 (doesn't happen in Svelte 4) when you have an element that fades in with a Svelte transition there will be a flash of content before it disappears and then the fade-in happens as normal.

Possibly related to #13882

Am I doing something wrong, or is this an actual bug? It only started happening in my project after upgrading to Svelte 5.

Reproduction

REPL https://svelte.dev/playground/510da9e8fd0f45fb85593cef8ce0f095?version=5.14.1

Click Start (the flash should happen almost always)

Logs

No response

System Info

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 58.11 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.volta/tools/image/node/22.11.0/bin/node
    npm: 10.9.0 - ~/.volta/tools/image/node/22.11.0/bin/npm
    pnpm: 9.11.0 - ~/Library/pnpm/pnpm
    bun: 1.1.38 - ~/src/interactive-deeptime/node_modules/.bin/bun
  Browsers:
    Brave Browser: 125.1.66.110
    Chrome: 131.0.6778.140
    Edge: 131.0.2903.99
    Safari: 18.1.1
  npmPackages:
    svelte: ^5 => 5.14.1

Severity

blocking an upgrade

[phocks]

Just an update on this. Here's a workaround I came up with, but yeah ... it's obviously not ideal.

Basically, if you wrap the state triggering the fade in, in a setTimeout(() => { then it must defer the entry of the element to later on (perhaps after a repaint or something).

Still, it would be good to fix this properly.

<script>
  /**
   * Fix for Svelte 5 (apparent) bug where fade in transitions
   * seem to flash a frame of the object before it disappearing
   * and then fading in as usual.
   */

  import { Tween } from "svelte/motion";
  import { fade } from "svelte/transition";
  import { linear } from "svelte/easing";

  const progress = new Tween(0, {
    duration: 10000,
    easing: linear,
  });

  let showCircle = $derived(Math.floor(progress.current / 10) % 2 === 0);

  async function togglePlay() {
    await progress.set(0, { duration: 0 });
    await progress.set(100);
  }

  let showCircle2 = $state(false);

  $effect(() => {
    // setTimeout required to fix Svelte 5 transition issue
    // https://github.com/sveltejs/svelte/issues/14732
    setTimeout(() => {
      showCircle2 = showCircle;
    }, 0);

    // REACTIVE DEPENDENCY: showCircle
    showCircle;
  });
</script>

<svg width="400" height="400">
  {#if showCircle2}
    <circle in:fade cx="200" cy="200" r="150" fill="salmon" />
  {/if}
</svg>

<div>
  <button onclick={togglePlay}>Start</button>
  Progress: {Math.round(progress.current)}%
</div>

[Rich-Harris]

I have no idea what's going on in this repro. Nothing is fading at all. Can you simplify it so that it's a minimal reproduction?

[phocks]

I have no idea what's going on in this repro. Nothing is fading at all. Can you simplify it so that it's a minimal reproduction?

Oh, sorry, it looks like the REPL saved my half-finished fix. It should be reverted back to a minimal reproduction. Thanks @Rich-Harris

Edit: Seems to flash in Firefox and Safari more often than in Chrome.

[Rich-Harris]

Yeah, I see it. This is super weird. Hmm