CODEWITHSUNDEEP
htmlcssanimation
kailash yogeshwar
kailash yogeshwar

Reputation: 834

Chrome css3 mix blend mode bug in chrome

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;
    }

Upvotes: 12

Views: 16562

Answers (4)

Lewitje
Lewitje

Reputation: 11

I had the issue with blend-mode and opacity in the March update, adding will-change fixed it for me.

will-change: opacity;

Upvotes: 1

strarsis
strarsis

Reputation: 516

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.

Upvotes: 3

Nick F
Nick F

Reputation: 10122

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.

Upvotes: 19

Bilal Maqsood
Bilal Maqsood

Reputation: 1246

it will work on all browsers try this

.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;
    }

Upvotes: -3

Related Questions