CSS animation won't work in Firefox

Question

I have a select box in "multiple" mode that fetch its data asynchronously. While waiting for the data, I want the select box to show a spinner. I have the following code working under Chrome, Chromium and Edge but under Firefox (tested on 52 and 57) the box stays 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>

I found a tool (https://www.browseemall.com/Compatibility/ValidateCSS) telling me that this CSS is compatible with FF37.

I tried to add vendor specific rules -moz- to @keyframes, transform and animations and to play with z-index and content but with no success so far.

Not sure if it's a duplicate of that question -- the pseudoelement will work in Chrome in his case. — sol, Jan 16 '18 at 14:12

score 2 · Answer 1 · answered Jan 16 '18 at 14:06

2

The problem is not in the animation. It is because of using pseudo-elements in select.

It is not good practice to use after and before pseudo-elements in select. You should add a wrapper div and style that div.

problem with <select> and :after with CSS in WebKit

answered Jan 16 '18 at 14:06

Eduard Void

2,646
1
13
13

it's better to flag as duplicate if you find a similar question – Temani Afif Jan 16 '18 at 14:08
2

the question I posted is a proof of what I am telling - not an answer. He thinks that the problem is in animation. – Eduard Void Jan 16 '18 at 14:11

score 1 · Accepted Answer · answered Jan 16 '18 at 14:10

select is handled differently between browsers. Pseudoelements are probably best avoided. In your case, the pseudoelement is being applied in Chrome, but not in Firefox.

As an alternative, apply the pseudoelements to a wrapper.

fiddle

.select-wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.loading {
  width: 300px;
  height: 200px;
}

.select-wrapper:before,
.select-wrapper:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}

.select-wrapper:before {
  width: 100%;
  height: 100%;
  background-color: rgba(211, 211, 211, .8);
}

.select-wrapper: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);
  }
}

<div class="select-wrapper">
  <select class="multiselect loading" multiple></select>
</div>

the loading class should be moved to .select-wrapper, too. As the class is an indicator of loading and animation is binded to the wrapper — Eduard Void, Jan 16 '18 at 14:14

CSS animation won't work in Firefox

2 Answers2