Chrome中的CSS3混合模式在Chrome浏览器上存在问题

Question

我有两个重叠的遮罩，使用混合模式“multiply”将被遮盖的部分混合。 在 Chrome 中应用了效果，但具有此属性的 div 存在奇怪的闪烁。 造成这种闪烁的原因是什么，如何解决？ 我已经在 Firefox 上进行了测试，效果良好，但在 Chrome 上不行！

截图

上面的图像是动画结束后左侧div开始持续闪烁。

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

- kailash yogeshwar

---

这是我的HTML和CSS3代码。 - kailash yogeshwar

闪烁问题通常可以通过类似于 backface-visibility: hidden; 的方式解决。 http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp - Craig

Answer 1

我曾经遇到过这个问题，发现它似乎是由于不透明度与混合模式的组合造成的。解决方法是在过渡元素的父级上添加will-change: opacity或者transform: translateZ(0)规则，两种方式都可以解决问题，但我认为will-change选项更好一些（因为它更加规范）。

无论哪种情况，效果都是将该元素的绘制工作交给GPU（或者至少通知浏览器可能需要重新绘制），这似乎可以解决问题。

感谢Chromium bug跟踪器中的这个问题指引我找到正确的解决方案。

- Nick F

---

这在Chrome 73 Android中仍然是一个问题，可以通过这个答案解决。谢谢！ - James Glendenning

请确保使用此功能测试溢出/滚动内容。will-change可以使混合模式正常工作，但是当使用mix-blend-mode时会出现另一个导致溢出内容消失的错误。https://bugs.chromium.org/p/chromium/issues/detail?id=798148#c3 - Chase

“will-change” 对我有用，但只对同一元素有效，而不是父元素。对于最近发现此问题的人，关于这个问题在 Chromium Bug 跟踪器上有一个错误报告：https://bugs.chromium.org/p/chromium/issues/detail?id=961581 不幸的是，这种解决方法对 SVG 无效。 - Valera Tumash

这个解决了我的一个问题，在Safari里，混合模式在旋转后就消失了。 - Christian

Answer 2

我刚在最新版Chrome（2020年3月，Windows 10 x64）遇到了一个关于 mix-blend-mode 的问题，即对于负z-index的元素，mix-blend-mode 被简单地忽略了。然而，在其他浏览器中，如Firefox（稳定版和开发者版），它可以正常工作。

- strarsis

Answer 3

在三月的更新中，我遇到了混合模式和不透明度的问题，添加will-change使它对我起作用了。

will-change: opacity;

- Lewitje

---

非常感谢你，你救了我的一天。干杯！ - mithz07

Answer 4

它将在所有浏览器上工作，请尝试一下

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

- Bilal Maqsood

---

问题与跨浏览器兼容性无关。正如 OP 所示，混合模式在 Chrome 中可以工作，但会出现闪烁问题。 - Craig

混合模式在IE或Edge中根本不受支持。这不是兼容性问题，而是Chrome的一个错误。 - sissy