17

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
  • 272
  • 2
  • 7
  • 1
    Why do you wish to override user preferences? And why are you using `prefers-reduced-motion` if you don't want it? – harrymc Mar 11 '20 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 Mar 13 '20 at 14:50
  • Install an extension like Greasemonkey to get rid of the `prefers-reduced-motion`. – harrymc Mar 13 '20 at 16:27
  • It seem you can enforce the reduced motion with a command line flag, but not disable it. `brave-browser --force-prefers-reduced-motion` will do the trick. – eloyesp Apr 07 '21 at 16:57
  • 2
    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 May 01 '21 at 21:09
  • 1
    This article explains a Windows workaround that can tide us over until Chrome adds a setting for it. https://www.tpgi.com/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/ – Costa May 01 '21 at 21:34
  • I can't believe it's been 2 years and Chrome users don't have a solution for this. Firefox already has an override for this. – enriquein Jul 06 '22 at 18:53
  • 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 Jun 23 '23 at 02:41

3 Answers3

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
  • 543
  • 5
  • 18
  • 1
    But OP wants to use Chrome – Jacob Aug 24 '21 at 18:44
  • I can't find that setting. Has it been removed? – spacer GIF Aug 25 '21 at 22:43
  • You have to add it, see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion: "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. Nov 02 '21 at 09:49
1

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
  • 272
  • 2
  • 7
  • 1
    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 Dec 21 '22 at 04:33
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
  • 455,459
  • 31
  • 526
  • 924
  • 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 Mar 15 '20 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](https://www.w3schools.com/jsref/met_element_queryselectorall.asp) using a [CSS Selector](https://www.w3schools.com/cssref/css_selectors.asp). – harrymc Mar 15 '20 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 Mar 18 '20 at 01: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](https://www.sandboxie.com/)). – harrymc Mar 18 '20 at 07:27
  • ... or enable animations in the sandbox, as required. – harrymc Mar 18 '20 at 10:02