search

sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.63k stars 4.13k forks source link

Slide transition of svelte 5 does not work correctly on iOS #13442

Open mrh1997 opened 5 days ago

mrh1997 commented 5 days ago

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 commented 5 days ago

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