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!!
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.
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.
On Windows 10, go to Settings ⟶ Ease of Access ⟶ Display ⟶ Simplify and personalize Windows. Toggle "Show animation in Windows" off.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With