Transitions strip overflow-y and overflow-x inline style

[fraser-0]

Describe the bug

If you explicitly set overflow-y and/or overflow-x as an inline style on an element that has a transition, they are removed on completion of the transition. However, if overflow is set it won't be removed.

I noticed this on the fly transition but from what Patrick mentioned in the Discord post it appears to affect all transitions.

Patrick noticed the transition code is only readingelement.style.overflow (which is empty when element.style.overflowY is set) here and sets it back to it at the end here.

Reproduction

I have created this playground to highlight the issue. You can replace the inline style element to overflow: auto to see it work fine.

Logs

System Info

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 556.67 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh

Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.15.0 - ~/Library/pnpm/pnpm
    bun: 1.1.12 - ~/.bun/bin/bun

Browsers:
    Chrome: 133.0.6943.55
    Edge: 131.0.2903.112
    Safari: 17.0

npmPackages:
    svelte: ^5.0.0-next.1 => 5.19.9

Severity

annoyance

[adiguba]

The problems seems to come from #14930, here :

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

Lines 198 to 203 in 3c4a8d4

	/**
	* 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;

Then later :

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

Line 256 in 3c4a8d4

element.style.overflow = overflow;

So either we remove this if it is really not useful, or we fix it like this :

	var overflow = element.style.overflow;
+	var overflow_x = element.style.overflowX;
+	var overflow_y = element.style.overflowY;

Then :

-   element.style.overflow = overflow;
+  if (overflow_x === overflow_y) {
+    element.style.overflow = overflow;
+  } else {
+    element.style.overflowX = overflow_x;
+    element.style.overflowY = overflow_y;
+  }