CSS fullscreen blur using GPU - css

Question

I have exactly the problem from this question but I can't comment (as I have less than 50rep).
It has to do with getting a better performance out of blurring a full screen image through GPU acceleration but not having the sides "leaking".

Answer 1

If you don't mind adding an additional div, you can add a wrapper and apply the transformation to it.
I checked in Chrome Dev Tools and indeed Chrome rendered the wrapper #bg into a separate layer, although this kind of optimizations are very browser specific.
I would recommend reading https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
I would give you another suggestion however, instead using a big image and blur it, you can use the same image at a very low resolution (say 10x10 px) and make it full-screen. Almost the same result, but with far lesser bytes to load.
html {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: red;
position: relative;
width: 100%;
min-height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
transform: translate3d(0,0,0);
}
#bg > div {
background-image:url('http://lorempixel.com/1920/1920/');
background-size: cover;
position: absolute;
left: -60px;
top: -60px;
right: -60px;
bottom: -60px;
filter: blur(60px);
}
<div id="bg">
<div></div>
</div>