22

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).

gyohza
  • 322

4 Answers4

5

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

Amazon Dies In Darkness
  • 9,990
Lilian Prus
  • 51
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.
gyohza
  • 322
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.

eloyesp
  • 563
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.

harrymc
  • 498,455