19

Since Chrome version 74, prefers-reduced-motion media queries will be set with reduce value in case the user has disabled animations in controls inside Windows.

I'm on Win 10 and use mostly Chrome for testing. Animations weren't working on my computer but looked fine on other machines. After googling it, I re-enabled animations in controls inside Windows and voila - they started working.

That said, I think it's pretty annoying that we don't have a way to tell Chrome not to follow these system-wide flags. I disable most of Windows's standard animations because I favor performance instead of cumbersome "eye-candies" - but as a web developer, I want them on in Chrome regardless of however I want my OS in general to behave.

I tried looking for Chrome extensions but to no avail. Also looked for settings inside chrome://flags and wasn't able to find anything.

Am I missing anything? Are there any ways I can intervene with Chrome trying to be helpful and being extremely inconvenient instead?

Just to be thoroughly clear:

I want Windows animations under System > Properties > Performance > Settings to be turned off, including animate controls inside Windows, but still be able to see animations in Chrome (if the purple box in this link pulsates, then it is working).

Improve this question
8
  • 2
    Why do you wish to override user preferences? And why are you using prefers-reduced-motion if you don't want it?
    – harrymc
    Commented Mar 11, 2020 at 15:58
  • 4
    Because 1. I am the OS user, but 2. my application's user will be someone else. I want it on in Windows (my personal preference). I don't want it on in Chrome, because I need to have the same experience as my user to check whether it feels acceptable or not.
    – gyohza
    Commented Mar 13, 2020 at 14:50
  • 3
    Same boat as you. I don't want my Windows apps animating my menus... but as a web dev I need to see the animations on the web. Ridiculous that Chrome devs didn't consider this when testing.
    – Costa
    Commented May 1, 2021 at 21:09
  • 2
    This article explains a Windows workaround that can tide us over until Chrome adds a setting for it. tpgi.com/…
    – Costa
    Commented May 1, 2021 at 21:34
  • 1
    Sadly, @Costa's linked fix above really is the best (and only) fix for this right now. Specifically, only checking "Animate controls and elements inside windows" while ensuring everything else remains off. Unfortunately that seems like the only way to really resolve this for now. I appreciate that Chrome automates this, but ideally they should make an easily accessible override (especially in DevTools, which really doesn't exist yet since the current doesn't properly enable the preference, only disable).
    – patricknelson
    Commented Jun 23, 2023 at 2:41

4 Answers 4

Reset to default
2

Using Chrome DevTools's Command Menu:

  1. Open Chrome DevTools and press Ctrl + Shift + P on Windows/Linux or Cmd + Shift + P on macOS to open the Command Menu;
  2. Type reduced to filter available commands;
  3. Select the emulate CSS prefers-reduced-motion option, and then press Enter to toggle the emulation on/off;
  4. Refresh the webpage and check whether your animations run.
Improve this answer
1
  • 3
    Although this is very useful information, it doesn't solve the actual issue as described in the question. This only works the other way around, if you actually want to force reduced motion, not force animations in a reduced-motion environment.
    – gyohza
    Commented Dec 21, 2022 at 4:33
1

You can use Firefox instead of Chrome and change the setting in about:config. Setting the ui.prefersReducedMotion as an integer with a 0.

Improve this answer
3
  • 2
    But OP wants to use Chrome
    – Jacob
    Commented Aug 24, 2021 at 18:44
  • I can't find that setting. Has it been removed?
    – spacer GIF
    Commented Aug 25, 2021 at 22:43
  • You have to add it, see developer.mozilla.org/en-US/docs/Web/CSS/@media/…: "In Firefox about:config: Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion. Changes to this preference take effect immediately". I can confirm that this works in Firefox 92.0.
    – Evgeny A.
    Commented Nov 2, 2021 at 9:49
0

If you wish to disable the prefers-reduced-motion option in the CSS, use a browser extension/add-on to remove it when it is not needed.

You may use:

For information about manipulating the CSS see for example Manipulating Stylesheets with Greasemonkey.

Improve this answer
5
  • I do use ViolentMonkey, which is pretty much the same thing. The problem is I need to pass no-preference to the media queries for them to work as expected. The only way your suggestion would be feasible AFAIK would be to override every single prefers-reduced-motion rule defined in Bootstrap with the !important marker. Not only this is a bit clumsy, it's also potentially short-lived, since every new rule added to prefers-reduced-motion would not be overwritten by my custom rules.
    – gyohza
    Commented Mar 15, 2020 at 17:11
  • You can inject into the page a window.onload function that updates the CSS by looping through all nodes that contain the wrong prefers-reduced-motion value and modifying it to do no animation. See the HTML DOM querySelectorAll() Method using a CSS Selector.
    – harrymc
    Commented Mar 15, 2020 at 17:38
  • Correct me if I'm wrong, but there is no way I can magically select every single element that is affected by media queries, since they are affected by the environment, not the DOM. I can hold my own pretty well with document.querySelectorAll() and CSS selectors, I just don't think what you propose is anywhere feasible. I will update my question with a more detailed example of what I'm trying to achieve.
    – gyohza
    Commented Mar 18, 2020 at 1:30
  • You may inject prefers-reduced-motion: reduce to all @media tags. Or as a stronger method you could run Chrome in a sandbox in which animations are disabled system-wise (see Sandboxie).
    – harrymc
    Commented Mar 18, 2020 at 7:27
  • ... or enable animations in the sandbox, as required.
    – harrymc
    Commented Mar 18, 2020 at 10:02
0

You can use these command line flags to override system-wide setting:

--force-prefers-reduced-motion

--force-prefers-no-reduced-motion

Source:

https://peter.sh/experiments/chromium-command-line-switches/#condition-1:~:text=%2D%2Dforce%2Dprefers%2Dno%2Dreduced%2Dmotion

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .