Merge 8c51545843 into 020242d6be

.changeset/calm-overflow-stay.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: keep inline `overflow-x`/`overflow-y` after a transition ends

packages/svelte/src/internal/client/dom/elements/transitions.js

@@ -205,11 +205,13 @@ export function transition(flags, element, get_fn, get_params) {
 	var inert = element.inert;
 
 	/**
-	 * The default overflow style, stashed so we can revert changes during the transition
-	 * that are necessary to work around a Safari <18 bug
+	 * The default overflow styles, stashed so we can revert changes during the transition
+	 * that are necessary to work around a Safari <18 bug. We stash the longhands, because
+	 * restoring the shorthand would wipe e.g. an inline `overflow-x`
 	 * TODO 6.0 remove this, if older versions of Safari have died out enough
 	 */
-	var overflow = element.style.overflow;
+	var overflow_x = element.style.overflowX;
+	var overflow_y = element.style.overflowY;
 
 	/** @type {Animation | undefined} */
 	var intro;
@@ -261,7 +263,8 @@ export function transition(flags, element, get_fn, get_params) {
 					intro?.abort();
 					intro = current_options = undefined;
 
-					element.style.overflow = overflow;
+					element.style.overflowX = overflow_x;
+					element.style.overflowY = overflow_y;
 				}
 			);
 		},

packages/svelte/tests/runtime-browser/samples/transition-preserve-overflow-longhands/_config.js

@@ -0,0 +1,12 @@
+import { test } from '../../assert';
+
+export default test({
+	async test({ assert, window }) {
+		window.document.querySelector('button')?.click();
+		await new Promise((r) => setTimeout(r, 200));
+
+		const [a, b] = window.document.querySelectorAll('div');
+		assert.equal(a.style.overflowX, 'auto');
+		assert.equal(b.style.overflowY, 'scroll');
+	}
+});

packages/svelte/tests/runtime-browser/samples/transition-preserve-overflow-longhands/main.svelte

@@ -0,0 +1,24 @@
+<script>
+	function fade() {
+		return {
+			duration: 50,
+			css: (t) => `opacity: ${t}`
+		};
+	}
+
+	function slide() {
+		return {
+			duration: 50,
+			css: (t) => `overflow: hidden; opacity: ${t}`
+		};
+	}
+
+	let visible = $state(false);
+</script>
+
+<button onclick={() => (visible = !visible)}>toggle</button>
+
+{#if visible}
+	<div style="overflow-x: auto" transition:fade>a</div>
+	<div style="overflow-y: scroll" transition:slide>b</div>
+{/if}