Bug css3 mix blend mode cromato in chrome

Question

Ho due sovrapposizioni che si sovrappongono e la parte sovrapposta viene mescolata utilizzando la modalità di miscelazione multipla moltiplicata. In chrome l'effetto è applicato ma c'è uno strano sfarfallio del div con questa proprietà. qual è la ragione di questo sfarfallio e di come può essere risolto. L'ho provato su firefox è funzionante ma non in cromo.!

Screenshot

L'immagine sopra è un'animazione ottiene oltre e una volta che il suo fare il div sinistra inizia a lampeggiare in modo continuo.

<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

che funziona su tutti i browser provare questo

.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

ho avuto questo problema e ha scoperto che sembra essere causato dalla combinazione di opacità con mix-mix-mode. La soluzione era aggiungere una regola di will-change: opacity o alternativamente transform: translateZ(0) al genitore dell'elemento di transizione. O uno di questi funzionerà, ma penso che l'opzione will-change sia preferibile (nel senso che è meno hacky).

In entrambi i casi, penso che l'effetto sia quello di consegnare la pittura di quell'elemento alla GPU (o almeno di avvertire il browser che potrebbe essere ridipinto), che sembra risolvere il problema.

Credito a this issue nel bug tracker Chromium per indicarmi la giusta direzione.