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

Par

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.

Constatez le problème dans le tiers inférieur de la première photo.

Les images ne se mélangent plus avec le défilement.