-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Description
Describe the bug
Since Chromium 84, the page scrolls with the toggle button of an accordion (might be other scenarios), because the browser tries to keep the button in the same position in the viewport.
This has been fixed in Bootstrap 4.5.1
via this PR: twbs/bootstrap#31347
However, because Bootstrap-Vue doesn't follow the same structure for accordions it doesn't apply here.
The fix is to add the style overflow-anchor: none
to either the toggle button or a parent of the button.
We could solve this by adding a overflow-anchor-none
and overflow-anchor-visible
utility classes, and have overflow-anchor-none
applied by default via v-b-toggle
, and for users toggling accordion's another way could still utilize the helper class to turn off the behavior if they want.
Maybe have a setting to decide whether v-b-toggle
should turn off this behavior or not.
Steps to reproduce the bug
- Go to https://bootstrap-vue.org/docs/components/collapse#accordion-support
- Open a accordion under an accordion which is already open
- The browser should scroll the window up, keeping the clicked button in the same position in the viewport
Versions
Libraries:
- BootstrapVue: 2.16.0
- Bootstrap: 4.5.2
- Vue: 2.6.11
Environment:
- OS: Windows
- Browser: Chromium (Chrome, Edge..)
- Version: 84+