Multiple element transitions in same component fail in 3.50.0

[endigo9740]

Describe the bug

Hey everyone, I believe this may be similar or related to: #7828

In short:

• When only a single transition is present (fly) the component transition works as expected
• When both fly and fade transitions are used, only the fade operates, fly is broken
• Unlike other tickets, my issue is related to multiple transitions for multiple elements, but still within a single component

You can see this issue visualized in the gifs here. Note the second gif is missing the fly animation:
https://imgur.com/a/q8xjsVh

I came across this issue because I have an older version of this component that does not have this issue. However, when trying to use this component in a new project, the issue is present. Here's the full-fledge component that operates within v3.49.0 without issue:
https://github.com/Brain-Bones/skeleton/blob/dev/src/lib/Drawer/Drawer.svelte
https://i.imgur.com/8bviYW3.mp4

Checking npm list for either project I see there is a version difference:

• Older Project - svelte@3.49.0 (issue not present)
• Reproduction - svelte@3.50.0 (issue present)

So it appears to be a regression or breaking issue from svelte@3.49.0 -> svelte@3.50.0

Reproduction

I've included a minimal reproduction repo if you would like to test yourself:
https://github.com/endigo9740/svelte-transition-bug

You can view the source for the affected component with steps to reproduce here:
https://github.com/endigo9740/svelte-transition-bug/blob/master/src/lib/Drawer.svelte#L23

Logs

No response

System Info

System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1
    Memory: 971.55 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.8.0 - /opt/homebrew/bin/node
    npm: 8.18.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Firefox: 103.0.2
    Safari: 15.3
  npmPackages:
    svelte: (see below)

Running `npm list` for either project I see:

- Older Project - `svelte@3.49.0` (no issue)
- Reproduction - `svelte@3.50.0` (issue present)

Severity

blocking an upgrade

[Daniel-Livingston]

I've also made a REPL to illustrate the bug. The issue mainly happens when two different types of transitions are used, no matter which way the transition is happening, or when the same type of transition is being used but in opposite directions (one is opening, the other is closing).

[endigo9740]

Awesome thanks @Daniel-Livingston

A contributor on my project noticed the issue is limited to Chrome/Firefox browsers. Safari allows both animations to play as expected. Your REPL shows this as well. So there's a browser-specific issue at play.

[angryziber]

Yep, we also are experiencing this. Downgrade to 3.49.0 solves the issue, so this is a regression.

[baseballyama]

I've also made a REPL to illustrate the bug.

I checked it with 3.50.1 and it seems fixed.
Please update Svelte to 3.50.1 and let me know if it is fixed.

[iskrisis]

I can confirm this seems to fix the issue.

[endigo9740]

Confirmed fixed! I'll go ahead and close this out. Thanks for the heads up!