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

No spinning React logo if prefers-reduced-motion #7931

Merged
merged 1 commit into from
Nov 6, 2019

Conversation

donavon
Copy link
Contributor

@donavon donavon commented Nov 5, 2019

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.

This PR detects this, and prevents the spinning React logo from spinning.

Here it is as shown with and without the "Reduce motion" setting in the Accessibility section of the macOS System Preferences.

Screen Recording 2019-11-01 at 11 05 54 AM

@iansu
Copy link
Contributor

iansu commented Nov 5, 2019

Does this media query just get ignored in browsers that don't support it? Would it make more sense to have the spinning logo enabled by default and then use a media query to turn that off if the user has set that preference?

@iansu iansu added this to In progress in v3.3 via automation Nov 5, 2019
@iansu iansu added this to the 3.3 milestone Nov 5, 2019
@donavon
Copy link
Contributor Author

donavon commented Nov 5, 2019

Does this media query just get ignored in browsers that don't support it?

Yes. This means that users of older browsers that do not support prefers-reduced-motion won't see a spinning logo.

However, I would argue that this is the way it should be. We should default to something that doesn't exclude that portion of the population.

Also, this is a VERY small fraction of developers and only effects the default CRA source code, which will be changed soon.

Leaving it this way will negatively affect fewer people.

@iansu iansu merged commit 10daea2 into facebook:master Nov 6, 2019
v3.3 automation moved this from In progress to Done Nov 6, 2019
@iansu
Copy link
Contributor

iansu commented Nov 6, 2019

You've clearly thought this through and make a good case so I'm convinced. Thanks for the PR!

@lock lock bot locked and limited conversation to collaborators Nov 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
No open projects
v3.3
  
Done
Development

Successfully merging this pull request may close these issues.

None yet

4 participants