Open jessecoleman opened 1 month ago
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.
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 withgetComputedStyle(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):
https://github.com/user-attachments/assets/b7025f0f-8ec8-4468-8c4c-af9781c17c1c
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
Severity
blocking an upgrade