Pre-rendering a CSS filter transition?

Question

Is it possible to pre-render the transition from this:

filter:blur(10px) grayscale(100%) brightness(50%);

...to this:

filter:blur(0) grayscale(0) brightness(100%);

I want a smooth transition, but now the FPS is annoyingly low. See the example below, in full page mode . (Tested using NVIDIA GeForce GT 240M on a Full HD screen, so your faster GPU might not be weak enough to be as slow as mine.)

 div { background-image: url('https://static.pexels.com/photos/1998/sea-landscape-mountains-nature.jpg'); background-size: cover; -webkit-filter: blur(10px) grayscale(100%) brightness(50%); filter: blur(10px) grayscale(100%) brightness(50%); height: 1080px; transition: all 1s; width: 1920px; will-change: filter; } div:hover { -webkit-filter: blur(0) grayscale(0) brightness(100%); filter: blur(0) grayscale(0) brightness(100%); } 

 <div></div> 

Answer 1

I suspect there's no golden bullet for this, as browsers will probably always have slightly differing implementations of filters, and visually heavy effects like blur() will probably always be problematic. That said—there is a CSS property called will-change that is for exactly this situation:

.my-element {
  will-change: filter;
}

The will-change property does not trigger a prerendering per se, but it does give supporting browsers a heads-up that the filter property of this element will change at some point, and gives them time to optimize. This usually results in the creation of a new hardware-backed rendering layer in supporting browsers, and thus a smooth animation.

Support is not super-great as of right now, but still: latest Chrome & Opera (including on Android) as well as latest Firefox. WebKit has implemented, so it will likely ship in the next Safari. For others, the transform -hack mentioned in the comments usually has a similar effect (as it triggers a hardware-backed rendering layer by adding a null 3D-transform), but your mileage may vary.