Firefox 不显示 Bootstrap 的 CSS 过渡

Question

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

我尝试了什么

• 我检查了 Chromium ⇒ 它有效
• 我检查了我的辅助计算机（在 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 与我的辅助计算机进行了比较 ⇒ 任何名为“animation”或“transition”的配置项都没有差异
• 我检查了其他 CSS 过渡示例（例如 https://www.w3schools.com/css/css3_transitions.asp）⇒ 他们工作
• 我完全删除了 Firefox 的缓存目录 (~/.cache/mozilla) ⇒ 它不起作用

所有证据似乎都表明问题与我的用户帐户有关，但与 Firefox 用户配置文件无关。我检查了 Firefox 的配置目录 (~/.mozilla/firefox)。我没有找到任何可以解释这种行为的非个人资料文件。

我已经束手无策了。非常欢迎任何关于如何修复 Firefox（或其他检查）的建议！

Answer 1

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

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

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

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

这是来自链接的 sn-p：

用户偏好

对于 Firefox，reduce 请求在以下情况下被接受：

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