Firefox: Slow performance with large blurred elements - html

Question

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

Answer 1

Use translate instead of padding. Animating with padding is quite heavy for your computer.