Trzaski podczas korzystania z obrazu maski gradientu css z transformacją 3D

Question

Używam czystej paralaksy css na podstawie samouczka Keitha Clarka, który wykorzystuje transformacje 3d.

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

Ponadto mi pomocą css maski gradientu obrazu promieniowego gradientu do warstw, które są parallaxed.

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

stworzyłem demo na codepen z grafiką próbki: https://codepen.io/justynaj/full/veyJLz/.

W niektórych przeglądarkach widzę okropne usterki. Największym problemem jest to, że niedociągnięcia pojawiają się niedeterministycznie. Zauważyłem, że prawdopodobieństwo wystąpienia tej usterki wzrasta, gdy mój komputer CPU/GPU jest załadowany. Usterki pojawiające się w przeglądarkach opartych na webkitach, na przykład przeglądarka Opera w systemie Windows 10 lub przeglądarka Chrome w systemie Android. Czasami są widoczne natychmiast po wczytaniu strony, a czasem po przewinięciu strony.
Przykładowy zrzut ekranu: https://image.ibb.co/hQcrmG/chrome_android.png.

Jakieś pomysły, które powodują dziwne zachowanie przeglądarki?

Answer 1

Łzawienie (Trzaski) podczas przewijania są znacznie zmniejszone, gdy próbuję używać zwykłego background-color zamiast JPEG img elementów:

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

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

Używany „styl” wyłącznie dla celów demonstracyjnych szybko jak zastąpienie "src" było szybsze niż usuwanie i dodawanie reguł CSS. Jeśli to rozwiązanie jest wystarczająco dobre, zamień elementy "img" na "div".