CSSブレンドモードが本当にGPUを消費する

Question

「オーバーレイ」ブレンドモードのレイヤーを使用するWebサイトで作業しています。これらのレイヤーは、背景にグラデーション効果を作成するように移動しています。私はCSSアニメーションを使ってこれらのGPUレンダリングを行っていますが、かなり重く、ウェブサイトが開いてレンダリングされるたびにコンピュータからファンを聴くことができます。

このオーバーヒートの問題を軽減するためにパフォーマンスを改善する方法がわかりません。あなたはおそらく私を助けることができますか？ここで

は、ウェブサイトの懸念一部です：それは現時点であるとして、それが可能であれば

HTML

<div class="backgroundTransparent"> 
    <img id="img1" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_1.png') }}"> 
    <img id="img2" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_2.png') }}"> 
    <img id="img3" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_3.png') }}"> 
    <img id="img4" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_4.png') }}"> 
    <img id="img5" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_5.png') }}"> 
    <img id="img6" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_6.png') }}"> 
</div> 

CSSここで

@keyframes move { 
    from { 
     transform: translateX(0); 
    } 

    to { 
     transform: translateX(20%); 
    } 
} 
.transparent_background { 
    height:100%; 
    width: 100%; 
    position: absolute; 
    transform: translateZ(0); 
    mix-blend-mode: overlay; 

    animation-duration: 3s; 
    animation-name: move; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

は、サイトへのリンクですヘルプ：http://brunobosse.wiboyd.fr:8080

また、レアブレンドモード、パフォーマンスははるかに良いです。オーバーレイブレンドモードを改善することは可能ですか？

Answer 1

私はそれがあまりにもGPUの激しいので、バックグラウンドにオーバーレイを適用しないことになった、DOMの小さな要素にのみ。