Svelte 5: flip/crossfade animation breaks subsequent drag interaction on iOS

[jessecoleman]

Describe the bug

On iOS Safari, there's a regression with Svelte 5 that causes elements to not respect CSS transform: translate styling after they've had a flip or crossfade animation or intro transition animation played on them. This one took a while to track down, and I am using the Neodrag library as well, so it could be part of the issue (although I didn't change the version of Neodrag before/after migrating to Svelte 5).

The issue is that I can drag an element around on the screen, but if I then play a flip animation, the drag interaction no longer works. Notably, it does fire the onDrag family of callbacks, and if I inspect the DOM node style with getComputedStyle(node).transform it does seem to be getting updated by the event. But the element doesn't move on screen.

This issue does not exist in any other browsers I've tested in, and it didn't exist in Svelte 4 + iOS.

Reproduction

https://github.com/jessecoleman/svelte-5-flip/tree/crossfade

Here's a screen recording of the interaction (I rendered a crude crosshair so you could see where I'm touching, since iOS doesn't seem to have a better way to screen record):

ios-drag.mp4

Notice before playing the crossfade I can drag the elements around, but afterwards they stay static (even though the crosshair still moves.

Logs

No response

System Info

System:
    OS: Linux 4.19 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 16.37 GB / 23.49 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 8.15.5 - ~/.local/share/pnpm/pnpm

Severity

blocking an upgrade

[jessecoleman]

Just adding more context: seems like the issue is related to mixing translate and translate3d styles between the built-in svelte crossfade and the drag and drop library. passing gpuAcceleration: false to neodrag (which forces 2d translate) seems to fix the issue. Also, converting the built-in crossfade to use translate3d also fixes it. (In my actual application, I've replaced the built-in flip/crossfade/intro transitions to use translate3d everywhere for hardware acceleration).

Unfortunately that hasn't fully resolved the issue in my non-demo codebase, hoping I'm just missing something else obvious. But maybe this clue will help others running into this or similar issues. Leaving this open for now in case there's some way Svelte can simplify this use case.

[PuruVJ]

Neodrag author here, if you really need to, you could use transform option to set the left nd top properties. Granted its not very performant, but but could work in this scenario