How do I change the `prefers-reduced-motion` setting in browsers?

by

Oh, I didn’t see the “User Preferences” section in the mdn documentation. 🤦🏻‍♂️

For Firefox, the reduce request is honoured if:

  • In GTK/Gnome, if gtk-enable-animations is set to false. This is configurable via GNOME Tweaks (Appearance tab or General tab, depending on version).
    • Alternately, add gtk-enable-animations = false to the [Settings] block of the GTK 3 configuration file (~/.config/gtk-3.0/settings.ini).
  • In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
  • In Window 7 [& 8]: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
  • In macOS: System Preferences > Accessibility > Display > Reduce motion.
  • In iOS: Settings > General > Accessibility > Reduce Motion.
  • In Android 9+: Settings > Accessibility > Remove animations.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#User_Preferences

It says “for Firefox” however since this is a system setting at the OS level, this is likely how you change the setting for all browsers that support this media query.

Leave a Comment

tech