feat: warn on using `slide` transition with table elements

.changeset/silver-humans-yawn.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: warn on using `slide` transition with table elements

documentation/docs/98-reference/.generated/client-warnings.md

@@ -222,3 +222,13 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti
 ```
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
+
+### transition_slide_display_table
+
+```
+The `slide` transition does not work correctly with elements with `display: %value%`
+```
+
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element. Setting `height` to a value smaller than the element's natural height has no effect if the element's [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) style starts with `table` (which is the default state of table elements such as `<tr>`).
+
+Consider using a `flex` or `grid` layout instead.

packages/svelte/messages/client-warnings/warnings.md

@@ -186,3 +186,11 @@ To fix it, either create callback props to communicate changes, or mark `person`
 ```
 
 To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
+
+## transition_slide_display_table
+
+> The `slide` transition does not work correctly with elements with `display: %value%`
+
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element. Setting `height` to a value smaller than the element's natural height has no effect if the element's [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) style starts with `table` (which is the default state of table elements such as `<tr>`).
+
+Consider using a `flex` or `grid` layout instead.

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

@@ -165,4 +165,16 @@ export function state_proxy_equality_mismatch(operator) {
 	} else {
 		console.warn(`https://svelte.dev/e/state_proxy_equality_mismatch`);
 	}
+}
+
+/**
+ * The `slide` transition does not work correctly with elements with `display: %value%`
+ * @param {string} value
+ */
+export function transition_slide_display_table(value) {
+	if (DEV) {
+		console.warn(`%c[svelte] transition_slide_display_table\n%cThe \`slide\` transition does not work correctly with elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display_table`, bold, normal);
+	} else {
+		console.warn(`https://svelte.dev/e/transition_slide_display_table`);
+	}
 }

packages/svelte/src/transition/index.js

@@ -1,4 +1,8 @@
 /** @import { BlurParams, CrossfadeParams, DrawParams, FadeParams, FlyParams, ScaleParams, SlideParams, TransitionConfig } from './public' */
+
+import { DEV } from 'esm-env';
+import * as w from '../internal/client/warnings.js';
+
 /** @param {number} x */
 const linear = (x) => x;
 
@@ -92,6 +96,8 @@ export function fly(
 	};
 }
 
+var slide_warning = false;
+
 /**
  * Slides an element in and out.
  *
@@ -101,6 +107,13 @@ export function fly(
  */
 export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) {
 	const style = getComputedStyle(node);
+
+	if (DEV && style.display.startsWith('table-') && !slide_warning) {
+		slide_warning = true;
+		Promise.resolve().then(() => (slide_warning = false));
+		w.transition_slide_display_table(style.display);
+	}
+
 	const opacity = +style.opacity;
 	const primary_property = axis === 'y' ? 'height' : 'width';
 	const primary_property_value = parseFloat(style[primary_property]);