Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
theres-waldo opened this issue Jun 21, 2021 · 2 comments

Comments

@theres-waldo
Copy link
Contributor

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!

@frivoal
Copy link
Collaborator

frivoal commented Jun 22, 2021

I think this is largely out of scope for the specification, and browser should do what they feel is best. prefers-reduced-motion is not a setting set by the page author that the browser needs to honor somehow, but a preference exposed by the user agent to the page author, presumably based on some user setting.

Given that the user agent is in charge of determining when that setting should be exposed to the page, determining what it is the user want and what to do in response is its responsibility.

If you're taking the setting in from an OS level switch, rather than a browser specific preference, you may want to look at OS UI guidelines to know what behavior is expected.

If there is agreement among browsers about a particular behavior, I don't mind mentioning it in a note, but browser UI is generally out of scope for the normative parts of our specifications.

@theres-waldo
Copy link
Contributor Author

Thanks, @frivoal, fair point about the web standards not speaking to browser UI behaviours.

I guess the remaining piece of guidance I seek is from accessibility experts: considering a rubber-banding overscroll effect in particular such as that exists in browser on MacOS: if a similar effect were employed by a web page using CSS animations, would that be something you'd advise web authors to disable if prefers-reduced-motion is specified?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants