Skip to content

<b-collapse> Accordion causes page to scroll #5715

@Hiws

Description

@Hiws

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

  1. Go to https://bootstrap-vue.org/docs/components/collapse#accordion-support
  2. Open a accordion under an accordion which is already open
  3. 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+

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions