Glitches lors de l'utilisation de l'image du masque de dégradé css avec des transformées 3D

Question

J'utilise la parallaxe css pure basée sur le didacticiel de Keith Clark, qui utilise des transformations 3D.

transform: translate3d(0, 0, -30px) scale(1.31); 

En outre, je suis en utilisant l'image de masque de gradient de css avec un gradient radial de couches qui sont parallaxed.

mask-image: radial-gradient(10px circle at 50% 150px, transparent 0, black 100%) 

J'ai créé démo sur codepen avec exemples graphiques: https://codepen.io/justynaj/full/veyJLz/.

Dans certains navigateurs, je vois des problèmes terribles. Le plus gros problème est que les pépins apparaissent de manière non déterministe. J'ai remarqué que la probabilité d'ocuurence de ces problèmes augmente lorsque mon ordinateur/GPU est chargé. Glitches apparaissant dans les navigateurs basés sur Webkit, par exemple le navigateur Opera sur Windows 10 ou le navigateur Chrome sur Android. Parfois, ils sont visibles immédiatement après le chargement de la page, et parfois après le défilement de la page.
Exemple de capture d'écran: https://image.ibb.co/hQcrmG/chrome_android.png.

Des idées ce qui causent ce comportement de navigateur étrange?

Answer 1

Déchirure (Glitches) lors du défilement sont considérablement réduits lorsque je tente d'utiliser arrière-plan de couleur unie au lieu des éléments img JPEG:

https://codepen.io/Pendrokar/full/gGKGZO/

<img style="background-color:red" alt="" class="bg-img" aria-hidden="true"> 

Utilisé « style » uniquement à des fins de démonstration rapide que le remplacement de "src" était plus rapide que la suppression et l'ajout des règles CSS. Si cette solution est suffisante, remplacez les éléments "img" par "div".