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

[etainad008]

Hey, I would like to work on this :)

[etainad008]

The reason this happens is because of the difference between scaled length and unscaled lengths.
Zoom affects the scaled length, but not the unscaled one. For some reason the transform uses (?) the unscaled length, and when we have zoom: 2; for example, the calculated distance in each axis will be twice the length, with zoom: 3; three times the length, etc.
I am working on a fix which will account for this 👍

[joshf26]

Thank you so much for your work on this!

I tried using your updated flip and it works perfectly for the REPL I posted. This is enough to call this specific issue resolved.

However, one detail that exists in my project (that I left out of the REPL for simplicity) is my grid items also have transition:fade on them. Unfortunately, even when using your updated flip, removing items from the grid while zoomed in causes them to fade out in the wrong position. Here's a new REPL with your flip function plus transition:fade: https://svelte.dev/repl/9efb3a67a0f14a09b69fa09d7d062f51?version=4.2.19. Try zooming in and removing items from the grid to reproduce the issue.

Is this something that can be fixed along side your change? I'm also happy to cut a new issue if they're unrelated. Let me know if you need any more detail, and thanks again!

[etainad008]

Thank you for the bug 😉

I will check to see if they are related - perhaps it is a wide-spread problem among transitions/animations. Zoom is a newer feature if I am not mistaken and perhaps until now it was not accounted for.

I will update here so you can open a new issue if needed.

[etainad008]

I entered the new (and old!) REPLs on my phone, and I didn't see any problem (DuckDuckGo's browser & Chrome). When I came back home, the problems did show on desktop.
I looked at fade's source code but it seems that it does not change anything related to position - only opacity.
This only happens when animation:flip is used, which is weird, as the strange effect happens even when flip isn't called (when the last element is removed, for example).
In short, even the original problem does not happen on mobile for me.