Firefox下多选异步加载CSS旋转动画不生效问题求助

这个问题的核心原因是旧版本Firefox（52、57基于Gecko引擎）对原生<select multiple>元素的伪元素（:before/:after）支持存在限制——浏览器无法正确渲染这些伪元素，所以你只能看到背景色，加载动画完全不显示。Chrome/Chromium/Edge的渲染引擎对表单元素伪元素的支持更友好，所以能正常工作。

修复方案：用容器包裹Select，将加载动画绑定到容器上 #

我们可以把<select>放在一个容器内，把loading类应用到容器上，让伪元素渲染在容器层（覆盖在select上方），这样所有浏览器都能正确显示加载状态。

修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.multiselect-container { 
  width: 300px; 
  height: 200px; 
  position: relative; 
  display: inline-block; /* 确保容器贴合select尺寸 */
}
.multiselect { 
  width: 100%; 
  height: 100%; 
}
.loading:before, .loading:after{ 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  top: 0; 
  z-index: 1000; 
  pointer-events: none; 
  overflow: hidden; 
}
.loading:before { 
  width:100%; 
  height:100%; 
  background-color: rgba(211, 211, 211, .8); 
}
.loading:after { 
  margin: auto; 
  width: 32px; 
  height: 32px; 
  border: 4px solid #F37324; 
  border-left-color: transparent; 
  border-top-color: transparent; 
  border-radius: 50%; 
  /* 兼容旧Firefox的动画前缀 */
  -webkit-animation: spin 600ms infinite linear;
  -moz-animation: spin 600ms infinite linear;
  animation: spin 600ms infinite linear;
}
/* 兼容旧Firefox的关键帧前缀 */
@-webkit-keyframes spin { 
  from { transform: rotate(0deg); } 
  to { transform: rotate(359deg); } 
}
@-moz-keyframes spin { 
  from { -moz-transform: rotate(0deg); } 
  to { -moz-transform: rotate(359deg); } 
}
@keyframes spin { 
  from { transform: rotate(0deg); } 
  to { transform: rotate(359deg); } 
}
</style>
</head>
<body>
<div class="multiselect-container loading">
  <select class="multiselect" multiple></select>
</div>
</body>
</html>

关键修改点说明： #

• 新增了.multiselect-container容器，用于承载加载状态的伪元素，避免直接操作<select>元素
• 给容器添加display: inline-block，确保它的尺寸和内部select完全匹配
• 为动画和关键帧添加了-moz-前缀，确保旧Firefox能识别动画规则
• 保持了原有的背景遮罩和动画样式，只是把作用对象从select换成了容器

这样修改后，加载动画会覆盖在select上方，旧Firefox也能正常显示旋转的加载图标，同时不影响异步加载完成后移除loading类恢复正常交互。

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