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

[ffoodd]

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]

i'd be in favour of this

[mdo]

I can dig!

[mdo]

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

[ffoodd]

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

[andrehsu]

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]

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

[panoply]

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.