fix absolute positioning

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

@@ -369,6 +369,22 @@ function create_transition(dom, init, direction, effect) {
 		},
 		// out
 		o() {
+			// @ts-ignore
+			const has_keyed_transition = dom.__animate;
+
+			// If we're outroing an element that has an animation, then we need to fix
+			// its position to ensure it behaves nicely without causing layout shift.
+			if (has_keyed_transition) {
+				const style = getComputedStyle(dom);
+				const position = style.position;
+
+				if (position !== 'absolute' && position !== 'fixed') {
+					const { width, height } = style;
+					dom.style.position = 'absolute';
+					dom.style.width = width;
+					dom.style.height = height;
+				}
+			}
 			const needs_reverse = direction === 'both' && curr_direction !== 'out';
 			curr_direction = 'out';
 			if (animation === null || cancelled) {
@@ -432,10 +448,16 @@ function is_transition_block(block) {
 export function bind_transition(dom, get_transition_fn, props_fn, direction, global) {
 	const transition_effect = /** @type {import('./types.js').EffectSignal} */ (current_effect);
 	const block = current_block;
+	const is_keyed_transition = direction === 'key';
 
 	let can_show_intro_on_mount = true;
 	let can_apply_lazy_transitions = false;
 
+	if (is_keyed_transition) {
+		// @ts-ignore
+		dom.__animate = true;
+	}
+
 	/** @type {import('./types.js').Block | null} */
 	let transition_block = block;
 	while (transition_block !== null) {
@@ -479,7 +501,7 @@ export function bind_transition(dom, get_transition_fn, props_fn, direction, glo
 		const init = (from) =>
 			untrack(() => {
 				const props = props_fn === null ? {} : props_fn();
-				return direction === 'key'
+				return is_keyed_transition
 					? /** @type {import('./types.js').AnimateFn<any>} */ (transition_fn)(
 							dom,
 							{ from: /** @type {DOMRect} */ (from), to: dom.getBoundingClientRect() },
@@ -676,7 +698,6 @@ function each_item_animate(block, transitions, index, index_is_reactive) {
 	if (prev_index !== index) {
 		const from_dom = /** @type {Element} */ (get_first_element(block));
 		const from = from_dom.getBoundingClientRect();
-		let deferred = false;
 		// Cancel any existing key transitions
 		for (const transition of transitions) {
 			const type = transition.r;