[wp-trac] [WordPress Trac] #48551: Twenty Twenty: Replace JS-based smooth scroll with CSS

[WordPress Trac]

#48551: Twenty Twenty: Replace JS-based smooth scroll with CSS
---------------------------+-----------------------------
 Reporter:  williampatton  |      Owner:  (none)
     Type:  enhancement    |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:
 Severity:  normal         |   Keywords:
  Focuses:                 |
---------------------------+-----------------------------
 The theme currently uses a JS based approach for smooth scroll. A CSS
 based approach was suggested as an alternative. Discussions were ongoing
 and there are pros and cons to each method.

 Issue: https://github.com/WordPress/twentytwenty/issues/476
 PR: https://github.com/WordPress/twentytwenty/pull/506

 Details from the original ticket from GitHub:

 {{{
 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.
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48551>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform