3D変換でCSS勾配マスク画像を使用するときのグリッジ

Question

私は、キース・クラークのチュートリアル（3D変換を使用）に基づいて純粋なCSS視差を使用しています。

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

またIはparallaxedれる層に対して半径方向の勾配を用いてCSS勾配マスク画像を使用しています。

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

私は、サンプルグラフィックとcodepenにデモを作成しました：https://codepen.io/justynaj/full/veyJLz/。

一部のブラウザでは、ひどい不具合があります。最も大きな問題は、不確定的に現れるグリッチである。私は、コンピュータのCPU/GPUがロードされると、このグリッチが発生する確率が高くなることに気付きました。 WindowsのOperaブラウザやAndroidのChromeブラウザなど、Webkitベースのブラウザに表示される不具合。場合によっては、ページが読み込まれた直後に表示されることもあれば、ページのスクロール後に表示されることもあります。
サンプルスクリーンショット：https://image.ibb.co/hQcrmG/chrome_android.png。

この奇妙なブラウザの動作の原因は何ですか？

Answer 1

ティアリング（グリッチ）私が代わりにJPEGのimg要素の無地の背景色を使用しようとすると、スクロール時には大幅に削減されています

としてのみ簡単なデモのために、「スタイル」を使用し

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

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

「src」を置き換えるのは、CSSルールを削除して追加するよりも速かった。この解決策が十分であれば、 "img"要素を "div"に置き換えます。