diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 70e9eb8198d2..da35e7cd68e7 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
# svelte
+## 5.33.10
+
+### Patch Changes
+
+- fix: use `fill: 'forwards'` on transition animations to prevent flicker ([#16035](https://github.com/sveltejs/svelte/pull/16035))
+
## 5.33.9
### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9f93133afeab..d1cf6c428b13 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
"name": "svelte",
"description": "Cybernetically enhanced web apps",
"license": "MIT",
- "version": "5.33.9",
+ "version": "5.33.10",
"type": "module",
"types": "./types/index.d.ts",
"engines": {
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index cc895cbccbcc..38100e982cce 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -381,9 +381,15 @@ 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 from rendering without styles applied
+ // see https://github.com/sveltejs/svelte/issues/14732
+ var animation = element.animate(keyframes, { duration: delay, fill: 'forwards' });
animation.onfinish = () => {
+ // remove dummy animation from the stack to prevent conflict with main animation
+ animation.cancel();
+
// for bidirectional transitions, we start from the current position,
// rather than doing a full intro/outro
var t1 = counterpart?.t() ?? 1 - t2;
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 791919f9917d..eef48b0cbb6e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -4,5 +4,5 @@
* The current version, as set in package.json.
* @type {string}
*/
-export const VERSION = '5.33.9';
+export const VERSION = '5.33.10';
export const PUBLIC_VERSION = '5';
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy