Chrome css3 mix blend mode bug in chrome

Question

I hav a two overlays which overlap each other and the overlayed part is blended using mix blend mode multiply. In chrome the effect is applied but there is strange flickering of the div with this property. whats the reason for this flickering and how it can be solved. I have tested it on firefox its good running but not in chrome.!

Screenshot

The above image is once animation gets over and once its done the left div starts blinking continuously.

    <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

I had this issue and found that it seems to be caused by the combination of opacity with mix-blend-mode. The solution was either to add a rule of will-change: opacity or alternatively transform: translateZ(0) to the parent of the transitioning element. Either one of those will do, but I think the will-change option is preferable (in that it's less hacky).

In either case, I think the effect is to hand over painting of that element to the GPU (or at least to warn the browser that it might be repainted), which seems to fix the issue.

Credit due to this issue in the Chromium bug tracker for pointing me in the right direction.

Answer 2

I just encountered an issue with mix-blend-mode in latest Chrome (March 2020, Windows 10 x64) where the mix-blend-mode is simply ignored for elements behind with negative z-index. It works correctly in other browsers like Firefox (Stable and Developer Edition) though.