w3c / w3c/csswg-drafts

[css-mediaqueries] Should prefers-reduced-motion apply to behaviours built into the browser?

Open
#6,403 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

mediaqueries-5
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

The CSS Media Queries spec says the following about prefers-reduced-motion:

The prefers-reduced-motion media feature is used to detect if the user has requested the system minimize the amount of animation or motion it uses.

(The MDN page uses slightly different wording, "minimize the amount of non-essential motion it uses". I believe this issue is relevant with either wording.)

I understand this is primarily a mechanism for web developers to choose to do something differently (e.g. disable certain animations or substitute them for lower-motion animations) based on the value of prefers-reduced-motion.

However, I'm wondering if this setting should also affect behaviours built into the browser.

A particular example where this came up is the "rubber-banding" overscroll effect that some browsers show on MacOS (and sometimes other platforms) when a scroll container reaches the end of its scroll range.

In Firefox, we recently implemented this effect (starting in Firefox 89), and we received a bug report requesting that the effect be turned off when prefers-reduced-motion is specified. I did so, because it seems to me that the overscroll effect is a good example of "non-essential" / avoidable motion, and therefore disabling it is in keeping with the spirit of this setting.

However, we then received another bug report pointing out that the setting does not disable the overscroll effect in either Chrome or Safari, and Firefox's behaviour is therefore inconsistent with other browsers.

I would appreciate some guidance on:

  • Should browsers try to honour this setting in their built-in behaviours (such as the mentioned overscroll effect, and other animations that are in the browser's control, e.g. animations in the browser UI)?
  • If so, is there anything about a rubber-banding overscroll effect in particular that would exempt it from being disabled even if prefers-reduced-motion is specified?

Thanks!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Media Queries Level 5 prefers-reduced-motion definition, then compare the linked MDN wording and the Firefox Bugzilla reports 1705927 and 1714143. Done means providing resolved guidance on whether browser-controlled motion, including rubber-banding overscroll, is covered and whether any exception applies.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.