Bootstrap: Make use of the `prefers-reduced-motion` media query

[MikeRogers0]

Are there any plans to add support for the prefers-reduced-motion media query? Here is the CSS Tricks article about it.

Pretty much, if a user has set in their browser/system preferences they'd like reduce the amount of motion they see, we can know about.

What I'd purpose (if everyone thinks this is a good idea), is adjusting scss/mixins/_transition.scss to look more like:

@mixin transition($transition...) {
  @if $enable-transitions {
    @if length($transition) == 0 {
      transition: $transition-base;
    } @else {
      transition: $transition;
    }
    @media screen and (prefers-reduced-motion: reduce) {
        transition: none;
    }
  }
}

[mdo]

What's the browser support? I only see an issue regarding adding it to caniuse.com.

[alecpl]

It looks to me as Safari-only (?) feature for now. https://bugzilla.mozilla.org/show_bug.cgi?id=1365045

[patrickhlauke]

Yes, Safari only. I'd see this as a nice-to-have, future-proof addition though. Perhaps for 4.1?

[MikeRogers0]

Awesome! Am I ok to open a PR with the change?

[patrickhlauke]

Depends if @mdo and rest of the team feel it's a worthwhile addition, but yes a PR is always nice :)

[brianteeman]

@MikeRogers0 definite thumbs up from me - although its a AAA level issue in WCAG2.1 and currently only 100% supported on ios and safari that doesnt mean we shouldnt strive to make everything as accessible as possible.

I came up with a similar css change for Joomla https://github.com/joomla/joomla-cms/issues/19694 which is based on a non bootstrap one for Drupal https://www.drupal.org/project/drupal/issues/2940012

As I am not even remotely a css wizard I am sure whatever you propose will be much better and will get a big thumbs up from me.

[patrickhlauke]

@MikeRogers0 if you want to make a PR, i'd be happy to test it. @mdo i'd be in favour of adding this even if Safari-only at the moment, as it's low effort / nice to have / does not adversely impact non-Safari browsers that don't support it.

[MikeRogers0]

https://github.com/twbs/bootstrap/pull/25641 - This got merged, awesome :D

[pmochine]

You know what I don't like about this. I've never changed this option in my mac, but it was set to reduced motion. This does not feel fair. Now every animation was suddenly gone after 4.1 and I didn't understand why.