CSS zoom on grid breaks flip

[joshf26]

Describe the bug

Setting the CSS zoom property to a number other than 1 on a grid container with children with animate:flip causes the flip animations to originate from incorrect positions.

While I'm personally unfamiliar with Svelte's source code, I'd imagine this is a bug with the flip animation's origin position calculation not accounting for the zoom.

Please let me know if you need any more detail. Additionally, if you can point me to where this calculation is done in the code, I can take a shot at implementing a fix. Thank you!

Reproduction

REPL: https://svelte.dev/repl/8da44c207d3741e296054ff787111f3a?version=4.2.19

In this example, you can add and remove fruit randomly from a 3x3 grid. Try clicking the "Add" and "Remove" buttons and you'll find that the fruit is animated correctly. However, now try checking the "Zoom" checkbox, which applies the CSS property zoom: 2 to the grid. After doing so, you'll find that adding and removing fruit is no longer animated correctly. Specifically, the origins of the animations are calculated incorrectly.

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 9 5900HS with Radeon Graphics
    Memory: 11.25 GB / 13.65 GB
    Container: Yes
    Shell: 3.3.0 - /usr/bin/fish
Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
npmPackages:
    svelte: ^4.2.1 => 4.2.1

Tested on Chrome Version 128.0.6613.86 (Official Build) (64-bit)

Severity

annoyance