Glitches when using css gradient mask image with 3d transforms

Question

I'm using pure css parallax based on Keith Clark's tutorial, which uses 3d transforms.

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

In addition I'm using css gradient mask image with radial gradient for layers that are parallaxed.

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

I created demo on codepen with sample graphics: https://codepen.io/justynaj/full/veyJLz/.

In some browsers I see awful glitches. The bigest problem is that glitches appearing nondeterministically. I noticed that probability of ocuurence this glitches rises when my computer CPU/GPU is loaded. Glitches appearing in webkit based browsers, for example Opera browser on Windows 10 or Chrome browser on Android. Sometimes they are visible immediately after page load, and sometimes after page scrolling.

Sample screenshot:

Any ideas what causing this strange browser behavior?

Answer 1

Tearing(Glitches) when scrolling are significantly reduced when I try to use plain background-color instead of JPEG img elements:

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

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

Used "style" only for quick demonstration purposes as replacing "src" was faster than deleting and adding the CSS rules. If this solution is good enough, then replace "img" elements with "div".