title: CSS filter blur animation does not work correctly in Firefox
body: <h3>Original Intention</h3>
  
  <ul>
  <li>After clicking a button, have a modal popup on the center of the screen, while the original page content nicely blurs away in the background.</li>
  </ul>
  
  <h3>Result</h3>
  
  <ul>
  <li><p>Everything works as intended in Chromium and Safari, while the blur animation stutters in an awesomely ugly manner in Firefox.</p></li>
  <li><p>EDIT:  It turned out that the problem do not affect Firefox consistently. I switched from Mac to Windows and on the latter it magically works...   </p></li>
  </ul>
  
  <h3>Tests &amp; Research</h3>
  
  <ul>
  <li><p>I couldn't have found anything of value on the Web. As I understand, filter blur either works for other developers or don't.</p></li>
  <li><p>And then I realise that this issue does not occur when there is just a couple of elements to blur.</p></li>
  <li><p>So I reason, that if I apply filter blur with animation to a container holding the original content of the page, the web browser has a lot of elements to blur.</p></li>
  <li><p>Based on my home tests, the problem affects Mac, but does not occur on Windows. I reckon the issue might come from poor integration between Mac embedded graphic chipset vs. Firefox?</p></li>
  <li><p>All in all, I have constructed the below test case. It shows (on my Mac), that Chromium and Safari animates filter blur swiftly, while Firefox stutters and shows an extremely unpleasing performance.</p></li>
  </ul>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;style&gt;
    div#divContainer {
      display: flex;
      flex-wrap: wrap;
    }
  
    div.toBeBlurred {
      height: 50px;
      width: 50px;
      margin: 5px;
      background-color: crimson;
    }
  
    .blurred {
      filter: blur(25px);
      transition-duration: 2s;
    }
  &lt;/style&gt;
  
  &lt;script&gt;
    window.onload = function () {
      var btn = document.getElementById("applyBlurButton");
      var divContainer = document.getElementById("divContainer")
  
      btn.onclick = applyBlur;
  
      for (var i = 0; i &lt; 200; i++) {
        newDiv = document.createElement("div");
        newDiv.classList.add("toBeBlurred")
        divContainer.appendChild(newDiv)
      }
    }
  
  
    function applyBlur() {
      divContainer.classList.add('blurred');
    }
  &lt;/script&gt;
  
  &lt;body&gt;
    &lt;button id="applyBlurButton"&gt;Apply Blur!&lt;/button&gt;
    &lt;div id="divContainer"&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h3>Question/Request</h3>
  
  <ul>
  <li>Do I miss something critical here? How to make filter blur animations work correctly in Firefox on modern machines? (see EDIT in <strong>Result</strong> section)</li>
  </ul>