WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 months ago

Last modified 4 months ago

#48551 closed enhancement (fixed)

Twenty Twenty: Replace JS-based smooth scroll with CSS

Reported by: williampatton Owned by: SergeyBiryukov
Milestone: 5.3.1 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-dev-note
Focuses: Cc:

Description

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.

Change History (9)

#1 @ianbelanger
5 months ago

  • Keywords 2nd-opinion added

This ticket was mentioned in Slack in #core-themes by acosmin. View the logs.


4 months ago

#3 @sami.keijonen
4 months ago

+100 for this.

Important comment about disabling smooth scroll if user have asked for it.

#4 @joostdevalk
4 months ago

+100 from me too, the current behavior is broken, as per this bug: #48763

Last edited 4 months ago by SergeyBiryukov (previous) (diff)

#5 @ianbelanger
4 months ago

  • Keywords needs-patch added; 2nd-opinion removed
  • Milestone changed from Awaiting Review to Future Release

#6 @SergeyBiryukov
4 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 46824:

Twenty Twenty: Replace Smooth Scroll JS implementation with scroll-behavior CSS property.

The JS implementation had multiple issues and did not work as expected.

This change includes an accessibility enhancement by using prefers-reduced-motion: reduce media query property for users that don't want motion effects. For further explanation on this media query, see MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Accessibility_concerns

Props audrasjb, melchoyce, joostdevalk, Anlino, mauteri, sergiomdgomes, littlebigthing, williampatton, netweb, andraganescu, joyously, acosmin, mukesh27, hareesh-pillai.
Fixes #48763, #48551, #48866.

#7 @SergeyBiryukov
4 months ago

In 46825:

Twenty Twenty: Replace Smooth Scroll JS implementation with scroll-behavior CSS property.

The JS implementation had multiple issues and did not work as expected.

This change includes an accessibility enhancement by using prefers-reduced-motion: reduce media query property for users that don't want motion effects. For further explanation on this media query, see MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Accessibility_concerns

Props audrasjb, melchoyce, joostdevalk, Anlino, mauteri, sergiomdgomes, littlebigthing, williampatton, netweb, andraganescu, joyously, acosmin, mukesh27, hareesh-pillai.
Merges [46824] to the 5.3 branch.
Fixes #48763, #48551, #48866.

#8 @SergeyBiryukov
4 months ago

  • Keywords needs-patch removed
  • Milestone changed from Future Release to 5.3.1
Note: See TracTickets for help on using tickets.