[css-mediaqueries] Should prefers-reduced-motion apply to behaviours built into the browser?
Nobody has claimed this yet.
- 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-motionmedia 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-motionis specified?
Thanks!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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