Accordion and Collapsible animations don't work well with svelte's animate flip

[vitormisumi]

Describe the bug

When an accordion or a collapsible component is a child of an element inside an each loop with a flip animation, the height of the element gets distorted when the accordion item or collapsible that is being moved down is opened. It does not happen if the accordion or collapsible is closed.

Reproduction

https://stackblitz.com/edit/github-499v91hg?file=src%2Froutes%2F%2Bpage.svelte

Logs

System Info

System:
    OS: macOS 26.4.1
    CPU: (10) arm64 Apple M4
    Memory: 93.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 25.9.0 - /Users/vitor/.nvm/versions/node/v25.9.0/bin/node
    npm: 11.13.0 - /Users/vitor/.nvm/versions/node/v25.9.0/bin/npm
    Deno: 2.7.5 - /opt/homebrew/bin/deno
  Browsers:
    Chrome: 148.0.7778.97
    Safari: 26.4
  npmPackages:
    @lucide/svelte: ^1.14.0 => 1.14.0
    @sveltejs/kit: ^2.49.1 => 2.57.1
    bits-ui: ^2.16.5 => 2.18.1
    formsnap: ^2.0.1 => 2.0.1
    mode-watcher: ^1.1.0 => 1.1.0
    svelte: ^5.45.6 => 5.53.6
    svelte-sonner: ^1.0.7 => 1.1.1
    sveltekit-superforms: ^2.29.1 => 2.30.0
    tailwindcss: ^4.1.17 => 4.2.1

Severity

annoyance

[ieedan]

This is super weird. Turning off animations on the accordion does seem to fix it.

Probably a way around this would be to disable animations on the accordion during the flip.

This also doesn't seem to be anything to do with the way bits-ui is applying height because even with a static height applied like h-5 it still does it.

I suppose since tw-animate-css is using --bits-accordion-content-height it could be actually