-
Notifications
You must be signed in to change notification settings - Fork 765
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!