diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md
index c8fede681c..cba8343108 100644
--- a/documentation/docs/98-reference/.generated/client-warnings.md
+++ b/documentation/docs/98-reference/.generated/client-warnings.md
@@ -223,12 +223,14 @@ 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
+### transition_slide_display
```
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 `
`).
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
-Consider using a `flex` or `grid` layout instead.
+- `display: inline` (which is the default for elements like ``), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `` and ``
+- `display: contents`
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index 7fda90c326..6493501093 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -187,10 +187,12 @@ 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
+## transition_slide_display
> 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 `
`).
+The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for:
-Consider using a `flex` or `grid` layout instead.
+- `display: inline` (which is the default for elements like ``), and its variants like `inline-block`, `inline-flex` and `inline-grid`
+- `display: table` and `table-[name]`, which are the defaults for elements like `` and ``
+- `display: contents`
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index 98fb47124d..67222dbebd 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -171,10 +171,10 @@ export function state_proxy_equality_mismatch(operator) {
* The `slide` transition does not work correctly with elements with `display: %value%`
* @param {string} value
*/
-export function transition_slide_display_table(value) {
+export function transition_slide_display(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);
+ console.warn(`%c[svelte] transition_slide_display\n%cThe \`slide\` transition does not work correctly with elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display`, bold, normal);
} else {
- console.warn(`https://svelte.dev/e/transition_slide_display_table`);
+ console.warn(`https://svelte.dev/e/transition_slide_display`);
}
}
\ No newline at end of file
diff --git a/packages/svelte/src/transition/index.js b/packages/svelte/src/transition/index.js
index 9e4274fa7b..d897be378b 100644
--- a/packages/svelte/src/transition/index.js
+++ b/packages/svelte/src/transition/index.js
@@ -108,10 +108,16 @@ var slide_warning = false;
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) {
+ if (
+ DEV &&
+ !slide_warning &&
+ (style.display.includes('table') ||
+ style.display.includes('inline') ||
+ style.display === 'contents')
+ ) {
slide_warning = true;
Promise.resolve().then(() => (slide_warning = false));
- w.transition_slide_display_table(style.display);
+ w.transition_slide_display(style.display);
}
const opacity = +style.opacity;