prefers-reduced-motion

Bootstrap Studio Help
1

Just in case someone else comes across what happened to me....

I am on Windows 10 and somehow I changed my setting to "not show animations in Windows" in my display settings. I was working on a carousel with slide and fade and finished it. I usually preview in Edge and other browsers....resting assured there was no problems for a simple Bootstrap carousel in Firefox or Chrome. Nope....no transitions happening when I viewed ...what the heck ? Every other browser but those two ?

So in Booststrap.css is a setting now that if the user turns off Windows "not show animation in Windows" it applies a media query prefers-reduced-motion which turns off transitions on certain components.

There is a setting in the sass files to disable this new feature....but for the sake of vertigo....I will leave it on.

2

Interesting. I have window up and down animations disable on my Windows 7 machine, but animate controls inside windows is still enabled. My settings have not affected website transitions, so it must only take effect when you disable animations inside system windows (not Windows.)

https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-reduced-motion

I would have NEVER in a million years suspected this if I found transitions weren't working. Good catch @Twinstream !

3

It does make one wonder if I should now notify the user upon loading my site that they have prefers-reduced-motion enabled with a alert pop-up ?