CODEWITHSUNDEEP
cssbootstrap-4bootstrap-modal
George
George

Reputation: 83

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!!

Upvotes: 5

Views: 5670

Answers (5)

robsonsanches
robsonsanches

Reputation: 1295

To get animations back to your site, add the code from this link to your project

This will force Bootstrap transitions to work again.

Upvotes: 3

Highride15
Highride15

Reputation: 1

If you have downloaded bootstrap through npm or composer then you can set the sass variable $enable-reduced-motion to false.

// for npm

The variable $enable-reduced-motion is located in "your-project-folder/node_modules/bootstrap/scss/_variables.scss" file.

//for composer

The variable $enable-reduced-motion is located in "your-project-folder/vendor/bootstrap/scss/_variables.scss" file.

Upvotes: 0

eberhapa
eberhapa

Reputation: 368

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.

Upvotes: 4

pulsar
pulsar

Reputation: 987

Mozilla have published a list of what triggers this behaviour under certain conditions

in my case it was a combination of using Firefox, Windows 10, and having Ease of Access > Show Animations turned off. turning it back on resolved this issue with Bootstrap Modals fading

Upvotes: 0

Chris Ferdinandi
Chris Ferdinandi

Reputation: 1962

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.

Upvotes: 11

Related Questions