Skip to content
This repository has been archived by the owner. It is now read-only.

Consider removing JS-based smooth scroll #476

Closed
sgomes opened this issue Sep 23, 2019 · 1 comment
Closed

Consider removing JS-based smooth scroll #476

sgomes opened this issue Sep 23, 2019 · 1 comment

Comments

@sgomes
Copy link
Contributor

@sgomes sgomes commented Sep 23, 2019

Smooth scroll is currently implemented using a JS approach, that hijacks all anchors pointing to another location in the page, and replaces their default behaviour with a script that animates a page scroll. This is problematic for a number of reasons:

  • The animation is JS-based, blocking the main thread while executing and potentially leading to jank in slower devices (and some faster ones where JS-driven animations run at 60Hz while CSS-driven ones run at higher rates).
  • Being JS-based, the behaviour only takes place after the JS is fully loaded and executed, leading to inconsistencies in behaviour between the initial interactive page and the final one.
  • It hijacks regular anchors, which could interfere with screen readers and other assistive technologies.
  • It's a non-configurable behaviour that may be undesirable for certain categories of users that prefer less motion.
  • It's a non-standard behaviour that may interfere with how certain user agents display scrolling pages.

The current implementation is ~130 lines of complex JS (between smooth scroll, scrollToElement, and utility methods), that tries to take into account a number of things in the page to calculate the correct animation.

I propose instead using the standard scroll-behavior CSS property to obtain a similar effect. Switching to scroll-behavior would eliminate all the above issues, while reducing the implementation to a single line of CSS:

html {
  scroll-behavior: smooth;
}

This could be disabled for the purpose of other animations where the effect is not desirable (e.g. showing and closing modals) by adding/removing a single CSS class to the body:

.disable-smooth-scrolling {
  scroll-behavior: auto;
}

The downside of this approach is that it's not supported by all browsers, but given that this is a small visual improvement, I think it would fall squarely in the category of progressive enhancement, for which a standard behaviour fallback is acceptable, and preferable to the JS-based approach.

sgomes added a commit to sgomes/twentytwenty that referenced this issue Sep 24, 2019
Fixes WordPress#476.
sgomes added a commit to sgomes/twentytwenty that referenced this issue Sep 26, 2019
Fixes WordPress#476.
sgomes added a commit to sgomes/twentytwenty that referenced this issue Sep 30, 2019
Fixes WordPress#476.
@sgomes

This comment has been minimized.

Copy link
Contributor Author

@sgomes sgomes commented Oct 1, 2019

FYI, there is a discussion currently happening in #506 (which tries to implement a fix) that may interest those following this issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants
You can’t perform that action at this time.