From 68cffa84892c20717dc7d0e49a3a3af2f403f689 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 8 Jan 2025 16:17:32 -0500
Subject: [PATCH] fix: apply `overflow: hidden` style when transitioning
 elements, where necessary (#14930)

* fix: apply `overflow: hidden` style when transitioning elements, where necessary

* notes to self
---
 .changeset/sixty-paws-compete.md              |  5 ++++
 .../client/dom/elements/transitions.js        | 26 +++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/sixty-paws-compete.md

diff --git a/.changeset/sixty-paws-compete.md b/.changeset/sixty-paws-compete.md
new file mode 100644
index 0000000000..2fa3f9e84f
--- /dev/null
+++ b/.changeset/sixty-paws-compete.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: apply `overflow: hidden` style when transitioning elements, where necessary
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index dee029e88f..b3c16cdd08 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -192,6 +192,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
+	 * TODO 6.0 remove this, if older versions of Safari have died out enough
+	 */
+	var overflow = element.style.overflow;
+
 	/** @type {Animation | undefined} */
 	var intro;
 
@@ -242,6 +249,8 @@ export function transition(flags, element, get_fn, get_params) {
 				// Ensure we cancel the animation to prevent leaking
 				intro?.abort();
 				intro = current_options = undefined;
+
+				element.style.overflow = overflow;
 			});
 		},
 		out(fn) {
@@ -382,16 +391,29 @@ function animate(element, options, counterpart, t2, on_finish) {
 		var keyframes = [];
 
 		if (duration > 0) {
+			/**
+			 * Whether or not the CSS includes `overflow: hidden`, in which case we need to
+			 * add it as an inline style to work around a Safari <18 bug
+			 * TODO 6.0 remove this, if possible
+			 */
+			var needs_overflow_hidden = false;
+
 			if (css) {
 				var n = Math.ceil(duration / (1000 / 60)); // `n` must be an integer, or we risk missing the `t2` value
 
 				for (var i = 0; i <= n; i += 1) {
 					var t = t1 + delta * easing(i / n);
-					var styles = css(t, 1 - t);
-					keyframes.push(css_to_keyframe(styles));
+					var styles = css_to_keyframe(css(t, 1 - t));
+					keyframes.push(styles);
+
+					needs_overflow_hidden ||= styles.overflow === 'hidden';
 				}
 			}
 
+			if (needs_overflow_hidden) {
+				/** @type {HTMLElement} */ (element).style.overflow = 'hidden';
+			}
+
 			get_t = () => {
 				var time = /** @type {number} */ (
 					/** @type {globalThis.Animation} */ (animation).currentTime