I am facing an issue with a select box in "multiple" mode that fetches its data asynchronously. While waiting for the data to load, I want to display a spinner inside the select box. Interestingly, the code works perfectly fine on Chrome, Chromium, and Edge browsers, but not on Firefox (tested on versions 52 and 57), where the box remains plain white.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<style>
.multiselect {
width: 300px;
height: 200px;
position: relative;
}
.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%;
animation: spin 600ms infinite linear;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
</style>
</head>
<body>
<div>
<select class="multiselect loading" multiple></select>
</div>
</body>
</html>
Despite running compatibility tests using a tool like BrowseEmAll CSS Validator, which suggests that this CSS should be compatible with FF37, I haven't been able to resolve the issue on Firefox.
I've attempted adding vendor-specific rules (-moz-) to @keyframes, transform, animations, tweaking z-index, and content properties, but without any success so far.