Images avec un filter CSS mélangées lorsqu’on défile sur iOS : La solution

Il vous arrive certainement d’utiliser la propriété CSS filter pour appliquer divers effets visuels à vos images : nuances de gris (grayscale), flou (blur), etc. Lors de vos tests sur iOS Safari, il vous est peut-être arrivé de vous heurter au problème suivant : occasionnellement, lors du défilement, les images se mettent à se mélanger étrangement entre elles.

J’ai trouvé un hack CSS pour iPhone et iPad empêchant ce bug de se produire. Je vous le partage :

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Appliquez ces propriétés CSS aux images ou éléments avec background-image recevant le filter et les images cesseront de se mélanger lors du scroll.

Démonstration du problème

Voici un cas classique du bug, atteint après quelques défilements de haut en bas et inversement. Dans l’exemple ci-dessous, les images de fond, auxquelles on a appliqué un filter: grayscale(100), le bas de la photo de Sally Folk est coupé, remplacé par le haut de la photo suivante. Dans la capture d’écran suivante, le problème ne se produit plus.