Svelte 5: Transition Bug

[mstachowiak]

Describe the bug

Transitions in Svelte 5 fail to render content completely, or if there is a short duration specified, not at all. See the reproduction for an example of the issue.

We first started noticing this 5.0.0-next.82 and it wasn't present in 5.0.0-next.81. The changes in 5.0.0-next.82 don't appear related at first glance, but that's when we started seeing issues in our application fwiw.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE91STY-bMBD9K1Nvpd2VorKkzYU4SP04tOfdW90DwTaMamwLD_kQ4r9XDqRL1I20PfRSWciM32Pe8zx6ptGowLLvPbNFo1jGPnrPFoyOPhZhpwwptmDBdW0ZT3goW_QEprDVRjAKguXCCsLGu5agh2BQKhhAt66B27FBQm1hAxI6e7uO7PgYRRBqt__sLClLsIG3gQpSd7owQd1HnhWkO1vG74BcVRk1ke_uoT_1ocsOb2ZlxAdheTI6ji4tr9P88WQJVvD021SAT13FkzodSduOyFlwtjRY_tz0F9LD6br9Deq5-2F08zXefabfZ8oENYGPtdtfgAnqk8FRb9SWuINAR6M2gkkM3hTHTBt1GMdsBV0wmqKt0GaQrvxhDb6QEm11LreularNIPUHCM6ghBv9ENd6ykwQr5f58xhgn8CXri3iO0_q5Znk86caA5TTmDGAdQSTOyV54ifmlalMptFmp59j0_dyUskgfRgGcB1dgfJzB0G8M7NKEDeYp_CNVMMTg39Ay-vQ--vQh-vQ6iWIJzNXPJG4O49iDHd2-M-zc68MLwZkYdsRlB05rd_9bYDPef0_8Zx3tmCNk6hRSZZR26nhx_AL8XqPNiYFAAA=

Logs

No response

System Info

  System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 478.14 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - /usr/local/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.4 - /usr/local/bin/pnpm
  Browsers:
    Brave Browser: 99.1.36.119
    Chrome: 123.0.6312.124
    Safari: 17.3.1
  npmPackages:
    svelte: 5.0.0-next.81 => 5.0.0-next.104 

Severity

blocking an upgrade

[harrisi]

The content in the right side doesn't get cut off in Safari (17.4.1). It still won't show the content (in any browser) unless the duration is >= 17. Which is the cutoff for 60fps, anything less than that is > 60fps.

[cdcarson]

I think this may be the same as #11081

[mstachowiak]

Here's a better example of how this manifests itself in our real-world application. Any time we show/hide something with a transition, showing / hiding any child elements inside the transitioned area breaks.

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE4VTUW-bMBD-K1d3UlspGsm6vlBA2ipN69MesrcxqQaOYMWxkX1OFCH--2RwUtKVTQjE3Xf-_N19dsdqIdGy-FfHFN8hi9mXtmULRsfWB3aPkpAtmNXOlD6T2NKIlkBytUlzRjZnWa5yErtWG4IOrBQVQg-10Tu4GQkiMlxZQUKrm0df7V-JBLbRhyetCBVBCh8sccLbmkuLd-e6KILnGqgRFixxQxa4hRcyDl9AEBy02dop39oV_6ZMorEHr1slzSpbDyLhAX6eZcJXt0miZjXWFI5IK9CqlKLcpt3tHaTZG_FXk7AfRtJdi3pa1A_b03c_n5AaymKUFgO4bvThAoxE3XvJo4Qgx0TZ8PHRu7skldiDUPFgRtp1lTPctxXD_XLZ96AdzWKWjhLTnBW83G6MdqqKr78t_fMYvM7pyc9BqA2EyRQo9QFqLqQF0mBQVWjAuqIM88E9KqBGu03jTbONdrL6OJL9UPI42giihtMKYYFLg7w6Bjqs4NAMLAiv5wka3raobOA6jWX4nXXt4ohcXWb6sHzi3wQ8YcHGtSumbg2rpnaeLX2vcLR2kDqx9z8bJ05mr9yJFNkKngl3SSTFG-DTHHA_B3yeAx7-BpLorOTcSRJVYp_lKiTYgu10JWqBFYv9he1_938AhXVWJnIEAAA=

[harrisi]

This example also works in Safari but not Chrome or Firefox.

[mstachowiak]

This appears to be fixed in the latest code running on https://svelte-5-preview.vercel.app/. It was broken in 5.0.0-next.107, but I'm guessing the code released in the upcoming 5.0.0-next.108 will resolve it.

[mstachowiak]

Resolved in 5.0.0-next.108