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

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: apply `overflow: hidden` style when transitioning elements, where necessary

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