Bootstrap: Collapse animation is not smooth when toggled via a button within the "collapse" element

[alexpls]

Bootstrap Version: 5.0.0-alpha1
Operating system: Windows 10
Browser: Firefox 80, Chrome 84

---

Hello,

I've noticed a case where the close animation for collapsible elements does not display smoothly:

Repro

1. Visit this JSBin https://jsbin.com/xihawedasa/edit?html,output
2. Click the "Outer toggle" button to open the collapsible element
3. Click the "Inner toggle" button to close it

Expected

1. The animation for closing the element displays smoothly

Actual

1. It doesn't

Notes

• This appears to be a regression since Bootstrap 4 (discussion).

---

If you consider this a bug, I'm happy to investigate what its cause is and open a PR to fix it.

Thanks for your awesome work on Bootstrap 😄

[ashishrathod95]

@alexpls hey have you tried changing the speed value or tried using external jQuery??

[alexpls]

Hi @ashishrathod95 - Boostrap 5 doesn't use jQuery, so I don't think adding it would help with anything. What do you mean by changing the speed value? It's not an option for collapse as far as I can see?

[marcomaiermm]

hi @alexpls i had the same "issue". The Bootstrap 5 documentation says that Bootstrap supports the prefers-reduced-motion media feature.
https://v5.getbootstrap.com/docs/5.0/getting-started/accessibility/#reduced-motion

I simply added

@media (prefers-reduced-motion: reduce):
{
.collapsing
{
transition-property: height, visibility;
transition-duration: 0.35s;
}
}

to an additionally loaded css file.

[patrickhlauke]

ah, so when you say that it "doesn't display smoothly", do you mean it doesn't animate at all and just opens/closes in one go? if so then yes, it'll be the prefers-reduced-motion kicking in on your page. If a user has set that preference, I'd advise against just brazenly ignoring it and reenabling animations regardless though...

incidentally, if it is this, it's likely you changed your settings on your machine, maybe without realising it? https://developer.paciellogroup.com/blog/2019/05/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/

[mznet]

@alexpls i've confirm the case was occured to even my chrome and firefox on mac. So, i changed bootstrap version to v4 to check that this issue was a known issue but suprisingly, it worked well on v4. I keep digging into the issue.

[alexpls]

Hi @marcomaiermm @patrickhlauke - I don't think it's a case of prefers-reduced-motion kicking in, since the animation that plays when the element is expanded is smooth, as is the animation that plays when the element is collapsed by using a button _outside_ itself. It's only when the element is collapsed via a button contained within itself that the animation gets stuttery.

Here's a video of the issue - unfortunately video was only captured at about 30fps so the stuttery animation isn't as obvious as it is when you see it on a computer screen.

[alexpls]

@mznet that's interesting - you're right - the issue does not appear on Bootstrap 4!

I verified this by keeping the HTML in my repro exactly the same but switching out Bootstrap 5 to Bootstrap 4, and it works as expected, link here: https://jsbin.com/xihawedasa/1/edit?html,output

I'll update the issue description to highlight that it's a regression.

[patrickhlauke]

ah, thanks for the video @alexpls (i have my system set up with reduced motion, hadn't turned it off to check the original jsbin)

[mdo]

Checking the demo out from @alexpls, this looks smooth on my end in Safari, but does appear choppy in Firefox and Chrome. Anything significant change in v5's collapse, @Johann-S?

[Johann-S]

It looks smooth on my end too 😟 and no particular breaking changes here, maybe it's on the CSS part

[XhmikosR]

The properties collapse transitions are not the most performant ones, unfortunately. I think we have an issue about it, but I'm unsure how we can fix this properly, i.e. by using transforms, opacity etc, properties that are performant.