Windows – How to prevent prefers-reduced-motion setting from ever working on Chrome

accessibilitygoogle-chromesystem-preferencesweb-developmentwindows 10

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 a developer and our project at work includes Bootstrap (I'm not fond of it at all). 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. As the article cleverly points out, I do disable most of Windows's standard animations because I favor performance instead of useless and 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?

Update 2020-03-18

I can cope with injected scripts – I don't care if it's a flag anywhere on the system or if it has to be done programmatically.


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 was all shaky-shaky, then it is working).

Best Answer

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.

Related Question