Pré-rendu d'une transition de filtre CSS?

Question

Est-il possible d'effectuer une pré-rendre la transition de ceci:

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

... à ceci:

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

Je veux une transition en douceur, mais maintenant le FPS est fâcheusement faible. Voir l'exemple ci-dessous, en mode pleine page. (Testé à l'aide NVIDIA GeForce GT 240M sur un écran Full HD, de sorte que votre GPU plus rapide pourrait ne pas être assez faible pour être aussi lent que le mien.)

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

Je soupçonne qu'il n'y a pas de remède miracle pour ceci, car les navigateurs auront probablement toujours des implémentations légèrement différentes de filtres, et des effets visuellement lourds comme blur() seront probablement toujours problématiques. Cela dit, il y a une propriété CSS appelé will-change qui est exactement cette situation:

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

La will-change propriété ne déclenche pas un pré-rendu en soi, mais il ne donne les navigateurs supportant une propriété heads-up que le filter de cet élément va changer à un moment donné, et leur donne le temps d'optimiser. Cela entraîne généralement la création d'un nouveau calque de rendu soutenu par le matériel dans les navigateurs de soutien, et donc une animation fluide.

Le support n'est pas super-super en ce moment, mais tout de même: le dernier Chrome & Opera (y compris sur Android) ainsi que le dernier Firefox. WebKit a été implémenté, donc il sera probablement livré dans le prochain Safari. Pour d'autres, le transform -hack mentionné dans les commentaires a généralement un effet similaire (car il déclenche un calque de rendu à support matériel en ajoutant une transformation 3D nulle), mais votre kilométrage peut varier.