Skip to content

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

@theres-waldo

Description

@theres-waldo

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!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions