Glitches bei der Verwendung von CSS-Gradientenmaske Bild mit 3D-Transformationen

Question

Ich benutze reine css Parallaxe basierend auf Keith Clarks Tutorial, die 3D-Transformationen verwendet.

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

Zusätzlich verwende ich CSS Gradienten Maskenbild mit radialen Gradienten für Schichten, die parallaxed werden.

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

ich erstellt Demo auf mit Beispiel Grafiken codepen: https://codepen.io/justynaj/full/veyJLz/.

In einigen Browsern sehe ich schreckliche Pannen. Das größte Problem ist, dass Störungen nichtdeterministisch erscheinen. Ich habe bemerkt, dass die Wahrscheinlichkeit des Auftretens dieser Störungen steigt, wenn meine Computer CPU/GPU geladen wird. Fehler, die in Webkit-basierten Browsern auftreten, z. B. Opera-Browser unter Windows 10 oder Chrome-Browser unter Android. Manchmal sind sie sofort nach dem Laden der Seite und manchmal nach dem Blättern der Seite sichtbar.
Beispiel screenshot: https://image.ibb.co/hQcrmG/chrome_android.png.

Irgendwelche Ideen, was dieses seltsame Browserverhalten verursacht?

Answer 1

Tearing (Glitches), wenn deutlich reduziert Scrollen, wenn ich versuche img Elemente anstelle von JPEG einfachen Hintergrund-Farbe zu verwenden:

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

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

Used "Stil" nur für den schnellen Demonstrationszwecken als Ersetzen "src" war schneller als Löschen und Hinzufügen der CSS-Regeln. Wenn diese Lösung gut genug ist, dann ersetzen Sie "img" Elemente durch "div".