Looking at this page in renderdoc, we first generate a blurred version of the portrait at the top, then render it to the windows using the blend brush just before covering it entirely with a very large linear gradient (which I thought was a solid color until I wondered why it didn't get batched with other solid rectangles) and proceeding with the visible elements of the page. The blur and blend aren't cached.
There is indeed a DOM node with an image and the following css properties:
filter: blur(60px) saturate(1.2);
Which id contained into a div:
transition: all 0.5s ease-in 5s;
-webkit-transition: all 0.5s ease-in 5s;
The css for the big gradient is:
background: linear-gradient(to bottom, rgba(255,255,255,0) ,rgba(255,255,255,1) 750px);
background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0) ,rgba(255,255,255,1) 750px);
The hidden blurred thing being
position:fixed, it always stays in the display port and trashes cached picture tiles.
Not sure whether it's worth optimizing for something like this. Since The "gradient" is not fully opaque we can't do any occlusion culling here. We could figure out why the filters aren't cached or do some optimization on the filters (why not apply color transformations like saturate on the down-scaled versions if we are blurring for instance).