Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animations disabled by bootstrap because using prefers-reduced-motion: reduce

I have noticed that the bootstrap modal animations don't make any animation when open or close, After check the bootstrap CSS file I found that the problem from prefers-reduced-motion: reduce i don't need my sites to support this media.

What can I do to makes the animations back again to my site?

The problem happens in FireFox and not happen in Google Chrome!!

like image 486
George Avatar asked Jul 07 '19 22:07

George


People also ask

How do I enable preferences in reduced motion?

In iOS: Settings > General > Accessibility > Reduce Motion. In Android 9+: Settings > Accessibility > Remove animations. 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.

What is @media prefers reduced motion no preference?

The media query prefers-reduced-motion is used to detect if the user has set an operating system preference to minimize the amount of animation or motion it uses. It can take two possible values: no-preference : Indicates that the user has made no preference in the underlying operating system.

How do I turn off reduced motion discord?

On Windows 10, go to Settings ⟶ Ease of Access ⟶ Display ⟶ Simplify and personalize Windows. Toggle "Show animation in Windows" off.

How do I enable reduced motion in Windows 10?

To simulate the operating system's reduced motion setting, without having to change your operating system setting: Press Ctrl + Shift + P on Windows/Linux or Command + Shift + P on macOS to open the Command Menu. Type reduced, to turn the simulation on and off.


2 Answers

This is exactly how Bootstrap should work given the user's state preference of not seeing animations.

To override this behavior would be to deviate from the user's expectations and desires and would not be appropriate.

It's an accessibility issue. For someone with severe motion sickness, vertigo, or a handful of other physical or cognitive issues, animations can be really disorienting.

In other words, it doesn't matter what you want. Don't try to "fix" this.

like image 153
Chris Ferdinandi Avatar answered Nov 05 '22 06:11

Chris Ferdinandi


If you're using sass to compile your files you can set $enable-prefers-reduced-motion-media-query to false (default true) to stop the behavior.

like image 23
eberhapa Avatar answered Nov 05 '22 06:11

eberhapa