Slide transition of svelte 5 does not work correctly on iOS

[mrh1997]

Describe the bug

A slide transition on iOS/Safari does not „slide in“ an element step by step. Instead the content is show in one step and then the height is increased step by step. But as the content might overflow this results in an effect that does Not Look Like „slide in“. All other browsers work as expected.

As a graphic is better than words look at this screencast: https://www.screencast.com/t/W7aQv2SZK5K

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACqVRTUvEMBD9K2MUdheUrh77BSILHsQVPHiwHrLNtIZNk5JMV5bQ_27TUPcHeJuZN_Pe441njVToWPrpmeYdspQ99j27ZXTuQ-NOqAin3pnB1mGSC3kqK12Rv5YNmB41ijH0FQUoVhWR5dpJkkanTkmBhfcgBsvnCTxst1sYx2XZ0VlhUbGO21ZO8D12GRx4fWytGbS4q40yNgUl229qjRKorRFnVMr8ZBWLLOVCNht8DiB8GKtEniyO_4deap_IZvK-DPLDQGQ0GF0rWR8Lv95AUcI6ZgMFXMVqM5b7t91r8vSyf9_lSbwKhDp3tZU9geK6nWIgV7FZSHa9sQQe5ghhhMaaDlbxKckl4lUWthUS_GneOOKE64Yrh5ssmI0aE-_0zc4I2UgULCU74Pg1_gJaN3c8CAIAAA==

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 7.03 GB / 31.75 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.11.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Severity

blocking an upgrade

[mrh1997]

By the way: the same Components works without trouble on svelte 4 (and iOS): https://svelte.dev/repl/4987a7b0a7fb4ebc990140bdce6fa3ac?version=4.2.19

[nwrenger]

Hey, I have encountered the same issue and used a few workarounds:

1. set the overflow style of the wrapper div around the animated objects to overflow: hidden;
2. don't use margin inside the animated content because otherwise minimal clipping occurs

Here is a code example with these changes applied: https://svelte.dev/playground/40c0981a9f37499686b642840e7b67ce?version=5.1.9