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.

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

Apply smooth-scroll when prefers-reduced-motion: no-preference #31877

Merged
merged 8 commits into from Oct 19, 2020

Conversation

ffoodd
Copy link
Member

@ffoodd ffoodd commented Oct 13, 2020

After watching @mmatuzo's talk "Writing even more CSS with accessibility in mind", I wanted to suggest optionnal smooth scroll.

I saw #24889 but it's kinda outdated, and with the support of prefers-reduced-motion it's more robust now.

Very simple and lightweight PR so feel free to discard it if you think it's still not valuable.

@patrickhlauke
Copy link
Member

i'd be in favour of this

@XhmikosR XhmikosR requested a review from mdo October 13, 2020 12:10
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can dig!

@mdo
Copy link
Member

We'll want to mention this in the Migration guide, and perhaps add something else in our docs about this.

@XhmikosR XhmikosR added this to Inbox in v5.0.0-alpha3 via automation Oct 14, 2020
@ffoodd
Copy link
Member Author

Added a mention in our accessibility page, and introduced a reboot section in the migration guide for alpha3.

scss/_reboot.scss Outdated Show resolved Hide resolved
v5.0.0-alpha3 automation moved this from Inbox to Approved Oct 19, 2020
@XhmikosR XhmikosR merged commit ed2f43e into main Oct 19, 2020
v5.0.0-alpha3 automation moved this from Approved to Shipped Oct 19, 2020
@XhmikosR XhmikosR deleted the main-fod-scmooth-scroll branch October 19, 2020 09:00
@andrehsu
Copy link

andrehsu commented Dec 16, 2020

On single-page applications, the effect is really jarring when using client-side navigation, which scrolls to the top of a page after a page load. Is there a way to disable this effect? Using

html {
    scroll-behavior: auto;
}

didn't seem to work.

@ffoodd
Copy link
Member Author

ffoodd commented Dec 16, 2020

@andrehsu Please open an issue instead of reviving a closed pull request.

@panoply
Copy link

On single-page applications, the effect is really jarring when using client-side navigation

@andrehsu indeed it is and it should not be the default.

When using scroll-behavior: smooth thenwindow.scrollTo will not be respected. It's problematic, especially considering modern web is leveraging client side rendered frameworks. Smooth scroll behaves identical to issues which arise when setting body, html { width: 100%; height: 100%; }. If (for example) you are swiping back and forth between history in web applications that restore scroll positions manually then issues arise. The interesting thing here is that (in chrome at-least) scroll-behavior: smooth will work fine when navigating back and forth by buttons, ie: users clicks back/forward button but the moment a user swipes back/forward is where the issues arise and previously referenced scroll positions or scroll positions being applied onload and invoked via window.scrollTo will not work.

The solution or workaround I've found is to explicitly set this to auto on the :rootselector and also asserting an !importanton the selector.

:root {
  scroll-behavior: auto !important;
}

Also, I'm not going to create a new issue for this because reviving an old one is how those come across this defect will be able to better find context regarding the bug, it is also linked in documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v5.0.0-alpha3
  
Shipped
Development

Successfully merging this pull request may close these issues.

None yet

7 participants