Bootstrap 5 Spinner在Firefox中不转动问题排查

核心判断 #

由于Bootstrap官方文档的Spinner也无法正常工作，可确定问题出在浏览器/系统层面的渲染或动画限制，而非代码实现问题。以下是针对性的解决步骤：

1. 强制启用Firefox硬件加速与WebRender

旧版ESR在CentOS环境中可能默认禁用了关键渲染特性，导致CSS动画失效：

• 打开Firefox地址栏输入 about:config，确认风险提示后进入配置页
• 搜索并设置以下参数：
  • layers.acceleration.force-enabled → 设为true（强制开启硬件加速）
  • gfx.webrender.all → 设为true（强制启用WebRender渲染引擎）
• 重启Firefox后测试Spinner效果

2. 排查系统全局动画限制

CentOS 9 Stream的桌面环境可能存在全局动画禁用设置：

• 打开系统设置 → 无障碍 → 视觉，确保「减少动画」选项处于关闭状态
• 尝试在终端直接运行firefox启动浏览器，避免加载自定义环境变量（部分环境变量会干扰渲染）

3. 用自定义CSS强制覆盖动画

如果浏览器/系统设置无法调整，直接通过CSS强制Spinner动画运行：

.spinner-border {
  animation: spin 1s linear infinite !important;
  border-top-color: #0d6efd !important; /* 保持Bootstrap默认蓝色，可按需修改 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

将这段代码添加到你的页面样式中，或通过Firefox用户样式管理器全局应用（可在about:support中找到用户样式目录），即可绕过浏览器的动画限制。

4. 手动替换Firefox版本（临时方案）

由于同系列102.14.0esr版本可正常运行，可尝试手动下载该版本压缩包：

• 解压后直接运行firefox二进制文件，无需系统级安装
• 测试Spinner是否恢复正常，验证是否为102.12版本的特定Bug

内容的提问来源于stack exchange，提问作者master_roby3