Glitches when using css gradient mask image with 3d transforms

user_8692349 0
Viewed 419

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:

enter image description here

Any ideas what causing this strange browser behavior?

css-transforms webkit css
1 Answers

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".

user_82596140
Related