Flip animation positions element incorrectly when transitioning out with scale transition

[bdpartridge]

Describe the bug

When the flip animation is used in conjunction with the scale transition, the element's original position isn't preserved while transitioning out. It looks like the correct translation is applied with an inline transform style, but it's being overridden by a transform style that's applied by the CSS animation that's created for the transition; the transform in the animation rule only includes scale and not translate, so the translation is wiped out.

Reproduction

Minimally reproduced here: https://svelte.dev/repl/b278f2bca76e472db771d7c5e0e58503?version=4.2.12.

To reproduce:

1. Add some items.
2. Remove any item except the top one.
3. Notice that the item being removed is positioned on top of the top item while it's transitioning out.

Logs

No response

System Info

System:
    OS: macOS 14.4
    CPU: (12) arm64 Apple M2 Pro
    Memory: 2.49 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
Binaries:
    Node: 18.17.1 - ~/projects/fwd/.gradle/nodejs/node-v18.17.1-darwin-arm64/bin/node
    npm: 9.6.7 - ~/projects/fwd/.gradle/nodejs/node-v18.17.1-darwin-arm64/bin/npm
    pnpm: 8.7.6 - ~/projects/fwd/.gradle/pnpm/pnpm-v8.7.6/bin/pnpm
Browsers:
    Chrome: 123.0.6312.59
    Edge: 122.0.2365.92
    Safari: 17.4
npmPackages:
    @sveltejs/vite-plugin-svelte: 2.5.3 => 2.5.3
    svelte: 4.2.8 => 4.2.8 
    vite: 4.4.9 => 4.4.9

Severity

annoyance

[bdpartridge]

I was able to work around this by replacing transition:scale with separate in:scale and out:scale directives.

[Rich-Harris]

FWIW this works a lot better in Svelte 5, which uses the Web Animations API (demo). There are still some glitches around rapid interactions between animations and transitions, but those are unrelated to this issue

[bdpartridge]

Thanks @Rich-Harris. That's good to hear. I'm very much looking forward to Svelte 5's first general release!

[dummdidumm]

Closing because this is fixed in Svelte 5