Chrom css3 Mix Mischmodus Fehler in Chrom

Question

Ich habe eine zwei Overlays, die einander überlappen und der überlagerte Teil wird gemischt mit Mix Blend-Modus multiplizieren. In Chrom wird der Effekt angewendet, aber es gibt seltsames Flackern des div mit dieser Eigenschaft. was ist der Grund für dieses Flackern und wie es gelöst werden kann. Ich habe es auf Firefox getestet, es läuft gut, aber nicht in Chrom.!

Screenshot

Das obige Bild ist einmal Animation kontinuierlich zu blinken über und einmal ihre getan links div beginnt bekommt.

<div class="bottom-banner wr-fl"> 
     <div class="left-overlay overlay"></div> 
     <div class="right-overlay overlay"></div> 
     <div class="center heading"> 
      {{entry.bottom_banner.banner_heading}} 
     </div> 
    </div> 
    .bottom-banner .left-overlay 
    { 
     mix-blend-mode:multiply; 
     background:rgba(0,54,108,0.7); 
     transform:skew(-25deg); 
     z-index:11; 
     left:-280px; 

    } 
    .bottom-banner .right-overlay 
    { 
     width:500px; 
     transform:skew(-25deg); 
     right:-600px; 
     animation:slideinbottom 2s ; 
     background:red; 
     mix-blend-mode:multiply; 
    } 

Answer 1

es auf allen Browsern wird versuchen, dieses

.bottom-banner .left-overlay 
    { 
     -webkit-mix-blend-mode: multiply; 
     -moz-mix-blend-mode: multiply; 
     -o-mix-blend-mode: multiply; 
     -ms-mix-blend-mode: multiply; 
     mix-blend-mode:multiply; 
     background:rgba(0,54,108,0.7); 
     -webkit-transform:skew(-25deg); 
     -moz-transform:skew(-25deg); 
     -ms-transform:skew(-25deg); 
     transform:skew(-25deg); 
     z-index:11; 
     left:-280px; 

    } 
    .bottom-banner .right-overlay 
    { 
     width:500px; 
     -webkit-transform:skew(-25deg); 
     -moz-transform:skew(-25deg); 
     -ms-transform:skew(-25deg); 
     transform:skew(-25deg); 
     right:-600px; 
     -webkit-animation:slideinbottom 2s ; 
     -moz-animation:slideinbottom 2s ; 
      -ms-animation:slideinbottom 2s ; 
      -o-animation:slideinbottom 2s ; 
      animation:slideinbottom 2s ; 
     background:red; 
     -webkit-mix-blend-mode: multiply; 
     -moz-mix-blend-mode: multiply; 
     -o-mix-blend-mode: multiply; 
     -ms-mix-blend-mode: multiply; 
     mix-blend-mode:multiply; 
    } 

Answer 2

ich dieses Problem hatte und festgestellt, dass es durch die Kombination von Opazität mit Mix-blend-Modus verursacht zu sein scheint. Die Lösung sollte entweder eine Regel von will-change: opacity oder alternativ transform: translateZ(0) zu dem Elternteil des übergehenden Elements hinzufügen. Entweder einer von denen, aber ich denke, dass die will-change Option vorzuziehen ist (in dem es weniger hacky ist).

In jedem Fall, ich denke, der Effekt ist, Malerei dieses Elements an die GPU zu übergeben (oder zumindest den Browser zu warnen, dass es möglicherweise neu lackiert wird), die das Problem zu beheben scheint.

Kredit aufgrund this issue im Chrom Bug Tracker für mich in die richtige Richtung.