twbs
Collapse function breaks with a large amount of content in accordion
(Originally posted by @froboy in #39215)
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
Originally posted in https://github.com/twbs/bootstrap/issues/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.
https://github.com/user-attachments/assets/01cc3744-36ac-4bc8-ba34-fbcfba1d0ed3
Reduced test cases
Originally posted in https://github.com/twbs/bootstrap/issues/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
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
@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)
I ended up getting around this by using the "Always open" option.
I think the "always open" option is not a solution :) I've never encountered such a problem with accordions.
https://github.com/user-attachments/assets/284062b4-7203-4b3b-89e6-c81cd6a0aae9
I also haven't encountered this on Windows, are you using a Mac?
