🐞 - Accordion component in Firefox closes immediatelly instead of showing animation for collapse

[konverso-aakulov]

Playground Link

No response

Description

I took the Basic example from the official documentation without any modification (https://taiga-ui.dev/components/accordion#base) and added it to the new project with only Taiga UI added (no other UI kits or dependencies).

It works, except the strange animation behavior for the first and last element in latest Firefox. Sometimes, when I click on the last element to expand and the first element is already expanded, then the first element collapses without animation. The last element is animated properly. And vise versa.

If I do the same for first and second items or for second and the third then everything works fine.

The issue does not appear on the documentation page, but appears on the Stackblitz example from the doc page.

In Chrome everything works fine.

Angular version

18.2.3

Taiga UI version

4.6.0

Which browsers have you used?

• [ ] Chrome
• [X] Firefox
• [ ] Safari
• [ ] Edge

Which operating systems have you used?

• [ ] macOS
• [X] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

[waterplea]

I wonder if it can be possible to drop our own transition implementation and just use Angular animations for height transition. Back when we created it it wasn't a thing I believe. And the only reason for using custom transition is because CSS cannot transition from/to auto which Angular animations can do.

[Kulikov17]

This problem is also observed in tui-expand and not only with the first and last element

[waterplea]

We should probably completely rework expand to Angular animations, instead of doing height calculations ourselves.