【问题标题】: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 的行为完全符合用户不看动画的特定偏好,鉴于用户声明的偏好,下面的“修复”是不合适的。

标签: 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 是为了以防万一……
猜你喜欢
  • 2019-11-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-22
  • 2012-01-01
  • 1970-01-01
  • 2015-12-01
  • 1970-01-01
相关资源
最近更新 更多