transition:slide does not apply overflow:hidden in Safari (Svelte 5 only)

[kaleabmelkie]

Describe the bug

After migrating to Svelte 5, all my "slide" transitions overflow their inner content in Safari.

Screen.Recording.2024-12-04.at.2.50.01.in.the.afternoon.mov

In the code for the slide transition, there is an 'overflow: hidden' css that's supposed to be applied (and it does in all browsers when using Svelte 4, and in all browsers except Safari when using Svelte 5).

svelte/packages/svelte/src/transition/index.js

Line 126 in 4c4f18b

'overflow: hidden;' +

I can finish my upgrade by adding overflow-hidden to all the places I use this transition at (and test them manually), but I feel like this should have just worked without any changes (and didn't want to risk new UI issues).

Reproduction

https://svelte.dev/playground/2320dc5a6c8a4ef7aeba080f88b32208?version=5.5.3

Logs

No response

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.05 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    npm: 10.9.1 - ~/.nvm/versions/node/v20.18.1/bin/npm
    pnpm: 9.14.4 - ~/Library/pnpm/pnpm
    bun: 1.1.38 - /opt/homebrew/bin/bun
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.86
    Edge: 131.0.2903.70
    Safari: 18.1.1
  npmPackages:
    svelte: 5.5.3 => 5.5.3

Severity

annoyance

[trueadm]

Have you tried adding -webkit-transform: translate3d(0, 0, 0) to your element that your animating?

[kaleabmelkie]

@trueadm Just tried that and the issue still there (still for Safari + Svelte 5 only).

Adding overflow: hidden fixes it though.

I created this issue because this behavior was inconsistent with the previous major version of Svelte, and happens only in Safari.

[trueadm]

@kaleabmelkie It's not a Svelte bug unfortunately, it's a well known Safari bug with web animations. It might be fixed on their latest technology preview, I need to check at some point.

[ohmrr]

@trueadm Just tried that and the issue still there (still for Safari + Svelte 5 only).

Adding overflow: hidden fixes it though.

I created this issue because this behavior was inconsistent with the previous major version of Svelte, and happens only in Safari.

thank you, this was the solution i was looking for