Firefox未显示Bootstrap的CSS过渡

时间：2019-12-02 14:16:50

标签： firefox css-transitions

我遇到了一个问题，Firefox无法在Bootstrap中显示CSS转换。 Bootstrap的示例（例如，在https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example上）不仅在我自己的代码中使用，而且在我的Firefox中不起作用。我说“我的Firefox”是因为我确信问题出在我的浏览器配置上。

我尝试过的

  • 我检查了铬⇒起作用
  • 我在辅助计算机上进行了检查（在Ubuntu 18.04上使用相同的Firefox版本70.0.1）⇒可以使用
  • 我在Firefox中创建了第二个用户个人资料⇒它不起作用
  • 我创建了第二个用户帐户⇒有效
  • 我检查了Bootstrap文档的旧版本（https://getbootstrap.com/docs/4.0)/components/collapse/#accordion-example）⇒可以使用（但不适用于4.0以下的任何版本）
  • 我已将用户个人资料从第二个用户帐户复制到主帐户中⇒不起作用
  • 我禁用了所有附加组件⇒不起作用
  • 我重新启动了Firefox并清除了其缓存（https://support.mozilla.org/en-US/kb/how-clear-firefox-cache）⇒不起作用
  • 我在开发人员工具中检查了日志⇒没有相关的错误或警告
  • 我将about:config与我的辅助计算机进行了比较⇒对于任何名为“ 动画”或“ 过渡”的配置项没有差异
  • 我检查了其他CSS过渡示例（例如https://www.w3schools.com/css/css3_transitions.asp）⇒它们起作用
  • 我已完全删除Firefox的缓存目录（~/.cache/mozilla）⇒不起作用

所有证据似乎都表明该问题与我的用户帐户有关，但与Firefox用户配置文件无关。我检查了Firefox的配置目录（〜/ .mozilla / firefox）。我没有找到任何非特定于配置文件的文件可以解释此行为。

我在机智的尽头。我们欢迎任何有关如何修复Firefox（或要检查的内容）的建议！

1 个答案:

答案 0 :(得分：3)

此问题与prefers-reduced-motion CSS媒体功能有关。

这2个文件包含一些相关代码：

bootstrap/scss/mixins/_transition.scss
bootstrap/scss/_transitions.scss

我在Windows 7上遇到了同样的问题，并找到了这篇文章：
prefers-reduced-motion - CSS: Cascading Style Sheets | MDN

以下是链接的摘录：

用户首选项

对于Firefox，如果满足以下条件，则将满足reduce请求：

  • 在GTK / Gnome中，如果gtk-enable-animations设置为false。可通过GNOME调整（外观选项卡或常规选项卡，具体取决于版本）进行配置。
    • 或者，将gtk-enable-animations = false添加到GTK 3配置文件的[Settings]块中。
  • 在Windows 10中：设置>轻松访问>显示>在Windows中显示动画。
  • 在窗口7中：“控制面板”>“轻松访问”>“使计算机更易于查看”>（如果可能）关闭所有不必要的动画。
  • 在macOS中：“系统偏好设置”>“辅助功能”>“显示”>“减少运动”。
  • 在iOS中：“设置”>“常规”>“辅助功能”>“降低动作”。
  • 在Android 9+中：设置>辅助功能>删除动画。
相关问题
最新问题