title: Firefox: Slow performance with large blurred elements
body: <p>I'm facing a little problem with Firefox : when there <strong>is large blurred elements displayed on the dom</strong>, everything is stupidly slow. </p>
  
  <h2>A few things I noticed :</h2>
  
  <ul>
  <li>On some modest configurations, a reflow event can even freeze the tab</li>
  <li>On high-end GPU, the FPS is slightly better, so I guess this filter is GPU activated</li>
  <li>Chrome &amp; Safari are running very smoothly</li>
  <li><strong>Even without animation</strong> the CPU usage is very high and any interaction is laggy</li>
  </ul>
  
  <h2>Ok show me the code</h2>
  
  <p><strong>Make sure to click on expand the window so that all the images can show up</strong>, otherwise the animation will stay smooth.</p>
  
  <p>I am creating a reflow event with a padding animation to intentionally stress the browser, but the overall interactions are laggy.</p>
  
  <p>On a more complex webpage like CodePen the FPS is way worse : <a href="https://codepen.io/creaforge/pen/mLPqNg" rel="nofollow noreferrer">https://codepen.io/creaforge/pen/mLPqNg</a>
  Even without firing the transform editing this pen shows some performance issue (try to select blocks of code) </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background-color: #eaeaea;
    transition: all .5s;
    padding: 20px;
  }
  
  div:hover {
    padding-bottom: 100px;
  }
  
  img {
    filter: blur(40px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Hover me --&gt; slow animation&lt;/div&gt;&lt;br/&gt;
  
  &lt;img src="http://www.placecage.com/c/200/600"&gt;
  &lt;img src="http://www.placecage.com/c/200/610"&gt;
  &lt;img src="http://www.placecage.com/c/200/620"&gt;
  &lt;img src="http://www.placecage.com/c/200/630"&gt;
  &lt;img src="http://www.placecage.com/c/200/640"&gt;</code></pre>
  </div>
  </div>
  </p>