1475462 - Add support for CSS prefers-reduced-motion media feature for MacOSX

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Hiroyuki Ikezoe (:hiro)]

This is for prefers-reduced-motion media feature on MacOSX.

+++ This bug was initially created as a clone of Bug #1365045 +++

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.1.1 Safari/603.2.4




Expected results:

Add support for CSS prefers-reduced-motion media feature.

New in CSS Media Queries Level 5:
https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

WebKit blog post covering the feature, justification, and examples:
https://webkit.org/blog/7551/responsive-design-for-motion/

Comment 1

[Hiroyuki Ikezoe (:hiro)]

Attachment: A patch for this

This patch should work, but this patch needs SDK 10.12 or higher, so to build MacOSX binary with this patch we need to update the SDK on our build infrastructures (bug 1475652)

Comment 2

[Jonathan Kew [:jfkthame]]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #1)
> Created attachment 8992523 [details] [diff] [review]
> A patch for this
> 
> This patch should work, but this patch needs SDK 10.12 or higher, so to
> build MacOSX binary with this patch we need to update the SDK on our build
> infrastructures (bug 1475652)

If we want to move forward here while waiting for an infrastructure SDK update, it should work to just include a local declaration of the accessibilityDisplayShouldReduceMotion property in the source file. See https://treeherder.mozilla.org/#/jobs?repo=try&revision=031a85b40d3c14f703b6396ac075fa682594d250 for a try job where I pushed your patch with an added declaration.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

That's great info!  Thanks Jonathan!   I've been trying to cross compile on Linux locally, and did just today succeed it with SDK 10.11 which is the one we currently use.  So anyway, it would be nice that someone tries the binary in the Jonathan's try in comment 2 and sees whether it works really fine on MacOSX devices.  I don't have any MacOS environment unfortunately.

Comment 4

[Jonathan Kew [:jfkthame]]

I tried this build on macOS 10.13 (with the demo at https://webkit.org/blog-files/prefers-reduced-motion/prm.htm), and it works as expected -- mostly.

The one shortcoming is that it doesn't respond to toggling the reduced-motion preference on the fly (as Safari does); even reloading the page (in the same tab) doesn't cause it to respect the new setting. Loading the same page into a new tab, however, does pick up the changed setting.

Comment 5

[Jonathan Kew [:jfkthame]]

I guess this means we should listen for the NSWorkspaceAccessibilityDisplayOptionsDidChangeNotification notification, and do.... something, I'm not sure exactly what.... to refresh things when it is received.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Attachment: Notify accessibilityDisplayShouldReduceMotion changes

(In reply to Jonathan Kew (:jfkthame) from comment #4)
> I tried this build on macOS 10.13 (with the demo at
> https://webkit.org/blog-files/prefers-reduced-motion/prm.htm), and it works
> as expected -- mostly.
> 
> The one shortcoming is that it doesn't respond to toggling the
> reduced-motion preference on the fly (as Safari does); even reloading the
> page (in the same tab) doesn't cause it to respect the new setting. Loading
> the same page into a new tab, however, does pick up the changed setting.

Thank you Jonathan!  That's exactly expected behavior!  Style changes responding to the system setting has't implemented yet, I was going to do it in a later bug, but anyway, here is a patch for that.

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Attachment: Bug 1475462 - Implement prefers-reduced-motion for MacOSX. r=mstange

The local declaration part was done by jfkthame.

Comment 8

[Markus Stange [:mstange]]

Comment on attachment 9004724 [details]
Bug 1475462 - Implement prefers-reduced-motion for MacOSX. r=mstange

Markus Stange [:mstange] has approved the revision.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0c635c42c13c
Implement prefers-reduced-motion for MacOSX. r=mstange

Comment 10

[Eliza Balazs [:ebalazs_]]

https://hg.mozilla.org/mozilla-central/rev/0c635c42c13c

Comment 11

[Hiroyuki Ikezoe (:hiro)]

Dropping the dependency to upgrade SDK (thanks to Jonathan Kew).

Comment 12

[Chris Mills [:cmills]]

Rachel Andrew already documented this, see

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/63#CSS