CSS 媒体查询“prefers-reduced-motion”在 Ubuntu 上的 Firefox 中破坏了 bootstrap 4 动画

【问题标题】：CSS media query 'prefers-reduced-motion' breaks bootstrap 4 animations in Firefox on UbuntuCSS 媒体查询“prefers-reduced-motion”在 Ubuntu 上的 Firefox 中破坏了 bootstrap 4 动画
【发布时间】：2019-08-21 01:03:51
【问题描述】：

我在 Ubuntu 上使用 Bootstrap 4 和 Firefox 65 进行了一些前端开发。由于 bootstrap.css 中的规则，一些动画无法正常工作：

@media screen and (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: none
    }
}

看起来 Ubuntu 更喜欢减少运动。我怎样才能禁用它？谢谢。

【问题讨论】：

对于将来查看此内容的任何人：这不是错误，而是一项功能。 CSS 的行为完全符合用户不看动画的特定偏好，鉴于用户声明的偏好，下面的“修复”是不合适的。
developer.paciellogroup.com/blog/2019/05/… - 很好读

标签： ubuntu firefox bootstrap-4 media-queries ubuntu-18.04

【解决方案1】：

这是一个新的 CSS 功能，网络浏览器将从现在开始尊重。可以在这里阅读更多信息：Google Developers

曾经遇到过这个问题。我能找到的最接近的解决方案是覆盖引导 css

`@media screen and (prefers-reduced-motion: reduce){
  .fade {
    transition: none;
  }
}`

有了这个：

`@media screen and (prefers-reduced-motion: reduce){
  .fade {
    transition: opacity .15s linear!important;
  }
}`

它带回了淡入淡出效果。但不像以前那么顺利。

【讨论】：

我选择了稍微简单的：@media (prefers-reduced-motion: reduce) { .fade { transition: opacity 0.15s linear; } }
是的，screen 这个词不是必须的。如您所知，!important 是为了以防万一……