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>

Edit: As mentioned yb @erikhoj if you add delay: 1 to the transition options the flashing disappears. eg.

<circle in:fade={{ delay: 1 }} cx="200" cy="200" r="150" fill="salmon" />

[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

[harshbarger]

I'm getting exactly the same effect. I can tell you that it is not limited to the fade; it happens in the scale as well. Also, while @phocks found it to happen less in Chrome, I am using a Chromium browser (Vivaldi), and it happens most of the time there as well.

[erikhoj]

I have the same issue. Weird thing is that setting delay: 1 on the animation completely fixes it for me. It seems like in: transitions without a delay are not starting in the correct initial transition state.

[boxscar]

I have the same issue. Weird thing is that setting delay: 1 on the animation completely fixes it for me. It seems like in: transitions without a delay are not starting in the correct initial transition state.

Noticed this issue on an android device chrome after a bump from svelte 4 to 5. Didnt seem to happen in desktop chrome and even in mobile it appeared a bit iconsistent as some of my modals had the issue 100% reproduceable, others didnt have the issue at all. The delay hack of a ms as suggested above "fixed" the issue everywhere it seems

[AsafAgranat]

I updated Sveltekit to latest, yet I am still seeing this same behavior, for all transitions. Using the delay: 1 hack works around it.

[raythurnvoid]

The fix seems reasonably easy:

--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -381,9 +381,17 @@ function animate(element, options, counterpart, t2, on_finish) {
 	// create a dummy animation that lasts as long as the delay (but with whatever devtools
 	// multiplier is in effect). in the common case that it is `0`, we keep it anyway so that
 	// the CSS keyframes aren't created until the DOM is updated
-	var animation = element.animate(keyframes, { duration: delay });
+	//
+	// fill forwards to prevent the element to render without animation styles applied
+	// when entering the onfinish callback, can be verified by adding a breakpoint in the onfinish callback
+	// see https://github.com/sveltejs/svelte/issues/14732
+	var animation = element.animate(keyframes, { duration: delay, fill: 'forwards' });
 
 	animation.onfinish = () => {
+		// have to manually cancel the dummy animation to remove it from the animations stack
+		// because it fill forwards
+		animation.cancel();
+
 		// for bidirectional transitions, we start from the current position,
 		// rather than doing a full intro/outro
 		var t1 = counterpart?.t() ?? 1 - t2;

[dummdidumm]

Fixed by #16035