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

Flicker is normally resolved with something like `backface-visibility: hidden;` http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp — Craig, Jan 14 '16 at 23:06

Nick F · Answer 1 · 2016-07-19T21:18:45.550

19

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.

edited Jul 19 '16 at 21:18

answered Jul 19 '16 at 18:34

Nick F

9,781
7
75
90

2

This is still an issue in chrome 73 android, which is resolved by this answer. Thanks! – James Glendenning Apr 12 '19 at 11:03
Make sure you test overflow/scrolled content with this. `will-change` gets the blend mode working, but there's a separate bug that causes overflowed content to disappear when mix-blend-mode is used. https://bugs.chromium.org/p/chromium/issues/detail?id=798148#c3 – Chase Aug 16 '19 at 18:58
`will-change` worked for me but on the same element, not the parent one. For those who discovered this issue recently there is the bug report on Chromium Bug tracker about this very same issue: https://bugs.chromium.org/p/chromium/issues/detail?id=961581 This workaround doesn't work for SVG though, unfortunately. – Valera Tumash Sep 13 '19 at 02:03
This fixed an issue for me in Safari, where mix-blend-mode went awol after a rotate. – Christian Jul 28 '20 at 16:54

score 3 · Answer 2 · answered Mar 20 '20 at 05:58

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.

score 1 · Answer 3 · answered Apr 28 '20 at 12:56

1

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

will-change: opacity;

answered Apr 28 '20 at 12:56

Lewitje

11
2

score -3 · Answer 4 · answered May 27 '15 at 13:57

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

The issue is not to do with cross browser compatibility. As the OP shows; the blend mode works in Chrome but there is a flicker. — Craig, Jan 14 '16 at 23:05
blend mode is not supported by IE or Edge at all. It's not a question of compatibility, it's a chrome bug. — sissy, Oct 05 '17 at 14:59

Chrome css3 mix blend mode bug in chrome

4 Answers4

Linked