Intent to Implement and Ship: CSS prefers-reduced-motion media query

[Stephen Mcgruer]

Contact emails

smcg...@chromium.org

Design doc/Spec

Spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

Design doc: https://docs.google.com/document/d/1aZnSfg7I-xbRBYui5jkUIdbIgZ5jK9u-CUplPFU_tC8/view

Summary

Implement + ship the CSS prefers-reduced-motion media query, which allows sites to detect when a user prefers reduced motion and adjust their CSS accordingly.

Motivation

The CSS 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. This is useful for users who either require or prefer that animations are minimized; for example people with vestibular disorders often desire animations to be kept to a minimum.

As of October 2018 this media feature is supported by WebKit and Gecko. The Chrome bug (http://crbug.com/722548) is a top-50 starred Hotlist=Interop bug, and the Edge feature request has 278 votes.

Risks

Interoperability and Compatibility

Interoperability risk is considered minor. Two other browsers have already shipped this feature. There is a small risk that the system APIs the browsers use to underpin the media query may diverge and so a given user might see different behavior on a given site across browsers, but so far all implementations match (and we intend to follow the existing choice of system APIs; see the design doc).

Edge: No signals

Firefox: Shipped

Safari: Shipped

Web / Framework developers: Positive; many stars on crbug and upvotes on Edge feature request.

Ergonomics

No ergonomics concerns. The design doc deliberately addresses some potential performance pitfalls and avoids them.

Activation

Low activation cost; just add a media query. Support for the media query can be done via window.matchMedia.

Debuggability

Unsure. Devtools appears to have a way to force media queries on, but in testing it looks like it only applies to size-based media queries (which are not the total sum of existing media queries). Developers could still debug by changing their system settings.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes and no. The media query will be added to all platforms simultaneously. However the underlying APIs are not available on all systems immediately, so users can only take advantage of it on some systems. Windows, Mac, and Android are expected to be covered in the initial implementation. Chrome OS has expressed an interest in adding an accessibility setting for reduced motion. Linux has no singular API for this, but we are investigating the options available in gtk.

A slight additional hiccup may be the unusually high number of Windows users who have the underlying system API (SPI_GETCLIENTAREAANIMATION) set to 'no animations'. This appears to be because Windows users have historically been told to disable animations on the system for performance reasons, but it is unclear if they will expect the setting to extend to applications instead of just the OS. Firefox has already noticed this issue post-shipping, however so far they have not considered it significant enough to do anything about. If this turns out to be an issue for Chrome we will be proposing adding a Chrome-level setting which can override the system one.

Is this feature fully tested by web-platform-tests?

No. Unfortunately this feature is hard to test; it would require adding some sort of internal API to force the media query on (e.g. see the WebKit tests), which I don't believe exists yet. We will likely add a blink-internal API when implementing the feature, and will investigate what can be done for web-platform-tests.

Link to entry on the feature dashboard

https://www.chromestatus.com/feature/5597964353404928

Requesting approval to ship?

Yes

[Rick Byers]

We do have a pattern for this now which is perhaps not terribly onerous, talk with +Robert Ma.  I believe the bar for shipping in cases like this is still that there's at least a bug filed that tracks getting the necessary automation API added and tests landed, but to otherwise not block shipping on it.

Hence LGTM1 from me (assuming you file the above bug and get the discussion started). I do think this is an important accessibility feature and definitely don't want chromium to be the one holding back universal availability here.

Link to entry on the feature dashboard

https://www.chromestatus.com/feature/5597964353404928

Requesting approval to ship?

Yes

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADY3Mae1PhVe40z%2B0GKX-8NBZMphJcawCTfqQX9_DT%2BwGYw%3DJA%40mail.gmail.com.

[Robert Ma]

First of all, here is the right place to file these bugs and you can find some existing examples there. Stephen, we can discuss more details later (perhaps in the issue).

[Stephen Mcgruer]

Thanks Robert, filed https://github.com/web-platform-tests/wpt/issues/14839

[Philip Jägenstedt]

LGTM2, let's discuss on https://github.com/web-platform-tests/wpt/issues/14839

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADY3MafuaGde2OojXF47KvY6HtAJ89e8cQKbUxy6-wg6MMd0%2BQ%40mail.gmail.com.

[Yoav Weiss]

LGTM3

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYdOVEBbJft0bgLkYC0-g1fMpQwunRU5A4i52U2PnoJYBQ%40mail.gmail.com.

[vvve...@gmail.com]

Hey guys,

What if the user who enabled Reduced Motion enjoys website animations and only wants to get rid of window animations when minimizing, maximizing, or closing???

[PhistucK]

At least on Windows, I believe there is a setting specifically for that.

☆PhistucK

On Mon, Mar 25, 2019 at 12:22 AM <vvve...@gmail.com> wrote:

Hey guys,

What if the user who enabled Reduced Motion enjoys website animations and only wants to get rid of window animations when minimizing, maximizing, or closing???

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/3f2a40ba-f5b0-426c-88f6-2661daf6da2d%40chromium.org.

[vvve...@gmail.com]

Like a browser based setting to reduce website animations?

[PhistucK]

No, I meant there is an operating system level setting for window animations (it is not an accessibility setting, unlike reduced motion, which I reckon is an accessibility setting).

The window animations setting is more targeted at weak GPUs than users that have issues with/do not like animations.

Here -

☆PhistucK

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/71935c0e-96e5-4473-909f-968435a1c7e9%40chromium.org.

[vvve...@gmail.com]

That did the trick! Thank you for clearing it up for me.

The problem is in the Ease of Access settings -

It toggles the animation checkboxes simultaneously on Performance Options