Collapse function breaks with a large amount of content in accordion

[froboy]

(Originally posted by @froboy in #39215)

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Originally posted in #39215

If a large amount of content is in an accordion section and you open the first one and read to the bottom then click on the second accordion item the user is scrolled to the middle of the second accordion item and has to scroll back up to the top.

bootstrap-accordions.webm

Reduced test cases

Originally posted in #39215

To test is the issue was my local or bootstrap I went to the bootstrap accordions web page and modified the html making the content of the accordion more. Once I did that I was able to recreate the same issue I see on my site in the bootstrap accordion web page.

https://stackblitz.com/edit/fr5fwebg

What operating system(s) are you seeing the problem on?

• Chrome Version 133.0.6943.99 (Official Build) (arm64)
• Safari Version 18.2 (20620.1.16.11.8)

What version of Bootstrap are you using?

v5.3.3

[mdo]

We don't account for overall scroll position at all in the accordion, and I'm not sure that we should try. We'd have to animate the page scroll up while the animation collapses on the longer item. Seems hairy to get right, but unsure what team thinks. /cc @julien-deramond

[froboy]

@mdo thanks for the quick look. I haven't dug too deeply into the bootstrap internals to see why this is breaking yet. Do you have any idea what might be causing this? I'm wondering if it might be a system thing instead. We've been able to recreate on Macs, but I just had a coworker test on Linux and he was not able to recreate it.

Linux Ubuntu 22.04 lts
Chrome Version 133.0.6943.126 (Official Build) (64-bit)
The same in Mozilla Firefox 135.0.1 (64-bit)