Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accordion scroll behavior in Chrome #31341

Closed
sonjastrieder opened this issue Jul 21, 2020 · 4 comments · Fixed by #31346
Closed

Accordion scroll behavior in Chrome #31341

sonjastrieder opened this issue Jul 21, 2020 · 4 comments · Fixed by #31346
Assignees
@patrickhlauke
Labels
backport-to-v4 css v4 v5

Comments

@sonjastrieder
Copy link

Since a recent Chrome update the accordion feature of the collapse component started to scroll down the entire page when opening a collapse area below the currently active collapse area.

Video - Comparison of scroll behavior in Firefox v77.0.1, where it works as expected, and Chrome v84.0.4147.89:
https://streamable.com/ojle0t

This can be replicated on the collapse page of the Bootstrap docs:
https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example

OS: macOS and Windows
Browser: Chrome v84.0.4147.89
@patrickhlauke
Copy link
Member

as this is browser behavior (Chrome choosing to always anchor on what you clicked if it results in the document's length changing), there's likely little that can be done on Bootstrap's part I think.

@patrickhlauke
Copy link
Member

ah, it seems this may be suppressable with https://drafts.csswg.org/css-scroll-anchoring/

@patrickhlauke patrickhlauke self-assigned this Jul 21, 2020
@sonjastrieder
Copy link
Author

Scroll anchoring does fix the issue for me. Thank you!
overflow-anchor has been around for a while in Chrome though. Wondering what has changed in one of the latest updates.

@patrickhlauke
Copy link
Member

i think they moved it from being behind a flag to now being enabled by default perhaps?

@patrickhlauke patrickhlauke mentioned this issue Jul 21, 2020
Merged
patrickhlauke added a commit that referenced this issue Jul 21, 2020
@patrickhlauke
Turn off scroll anchoring for accordions
e7f0384 
New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see #31341
This rule suppresses this new behavior and reverts back to the old way.

See https://drafts.csswg.org/css-scroll-anchoring/
patrickhlauke added a commit that referenced this issue Jul 21, 2020
@patrickhlauke
Turn off scroll anchoring for accordions (#31346)
c7bc7a3 
New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see #31341
This rule suppresses this new behavior and reverts back to the old way.

See https://drafts.csswg.org/css-scroll-anchoring/
patrickhlauke added a commit that referenced this issue Jul 21, 2020
@patrickhlauke
Turn off scroll anchoring for accordions
39f6403 
New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see #31341
This rule suppresses this new behavior and reverts back to the old way.

See https://drafts.csswg.org/css-scroll-anchoring/
patrickhlauke added a commit that referenced this issue Jul 21, 2020
@patrickhlauke
Turn off scroll anchoring for accordions (#31347)
cc49a5b 
New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see #31341
This rule suppresses this new behavior and reverts back to the old way.

See https://drafts.csswg.org/css-scroll-anchoring/
dsynr added a commit to dsynr/bootstrap that referenced this issue Aug 21, 2020
@dsynr @mdo
@XhmikosR @ysds @patrickhlauke @rohit2sharma95 @ffoodd @MartijnCuppens
V4 dev (#1)
f0bc90f 
* Remove backdrop-filter from toasts

* BrowserStack: test on Edge 15

* Backport twbs#31135

* Move color utility callouts to start of page

Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes.

* Change heading level

otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading

* Backport twbs#30326

Prevent overflowing static backdrop modal animation

TODO: backport the test too

* Backport twbs#30326 (Unit test)

* Update Babel config (twbs#31011)

* remove plugin-proposal-object-rest-spread
* add bugfixes
* `exclude: ['transform-typeof-symbol']` did nothing with our config

* Update devDependencies and gems

* Update dependencies, gems and regenerate package-lock.json (twbs#31261)

* @rollup/plugin-node-resolve 8.1.0
* popper.js 1.16.1
* qunit 2.10.1
* rollup 2.21.0

* Docs: forms accessibility cleanup (backport from v5) (twbs#31234)

* Expand advice for anchor-based controls

* Expand accessibility note in input group

* Correct statement about validation, fix server example

* Tweak label > accessible name

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>

* Turn off scroll anchoring for accordions (twbs#31347)

New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see twbs#31341
This rule suppresses this new behavior and reverts back to the old way.

See https://drafts.csswg.org/css-scroll-anchoring/

* Update to Ruby 2.7/Bundler 2.x. (twbs#31296)

* Clear timeout before showing the toast (twbs#31155)

* clear timeout before showing the toast

* Add unit test

* Remove the check for timeout

* Check for clearTimeout to have been called

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
# Conflicts:
#	js/tests/unit/toast.spec.js

* Add unit test for toast to check clearTimeout to have been called (twbs#31298)

* docs(skippy): prevent skip links from overlapping header

* Backport twbs#31344

Add toasts to the components requiring JavaScript

* Update devDependencies and gems

* @babel/cli                   ^7.10.4  →  ^7.11.0
* @babel/core                  ^7.10.4  →  ^7.11.0
* @rollup/plugin-babel          ^5.0.4  →   ^5.1.0
* @rollup/plugin-commonjs      ^13.0.0  →  ^14.0.0
* @rollup/plugin-node-resolve   ^8.1.0  →   ^8.4.0
* autoprefixer                  ^9.8.4  →   ^9.8.6
* eslint                        ^7.4.0  →   ^7.6.0
* karma                         ^5.1.0  →   ^5.1.1
* rollup                       ^2.21.0  →  ^2.23.0

* Remove overflow: hidden from toasts (twbs#31381) (twbs#31407)

Co-authored-by: Mark Otto <markd.otto@gmail.com>

* Backport twbs#31339 (twbs#31414)

* Backport twbs#31339

Add view on GitHub links for easier content editing from the docs

* Prepare v4.5.1. (twbs#31408)

* Remove flex: 1 0 100% from rows (twbs#31439) (twbs#31445)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

Co-authored-by: Mark Otto <markd.otto@gmail.com>

* Restore make-container-max-widths mixin

* Deprecate the `make-container-max-widths` mixin

* Remove undefined `$ignore-warning`

* Prepare v4.5.2. (twbs#31444)

Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: ysds <ysds.code@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
Co-authored-by: Gaël Poupard <gael.poupard@orange.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
olsza pushed a commit to olsza/bootstrap that referenced this issue Oct 3, 2020
@patrickhlauke @olsza
Turn off scroll anchoring for accordions (twbs#31346)
35e43c3 
New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see twbs#31341
This rule suppresses this new behavior and reverts back to the old way.

See https://drafts.csswg.org/css-scroll-anchoring/
@jaromirdalecky jaromirdalecky mentioned this issue Oct 8, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@patrickhlauke patrickhlauke

Labels
backport-to-v4 css v4 v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Turn off scroll anchoring for accordions twbs/bootstrap
2 participants
@patrickhlauke @sonjastrieder