Question

我有两个重叠的叠加层，叠加的部分使用混合混合模式混合。在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;
    }

Answer 1

我有这个问题，发现它似乎是由混浊与混合混合模式的组合引起的。解决方案是将will-change: opacity或transform: translateZ(0)的规则添加到转换元素的父级。其中任何一个都可以，但我认为will-change选项更可取（因为它不那么苛刻）。

在任何一种情况下，我认为效果是将该元素的绘制交给GPU（或者至少警告浏览器它可能被重新绘制），这似乎解决了这个问题。

Chromium bug追踪器中的this issue因为我指向正确的方向而被归功。

Answer 2

我刚在最新的Chrome浏览器中遇到了mix-blend-mode的问题（2020年3月，Windows 10 x64）其中mix-blend-mode对于带有负z-index的后面元素将被忽略。不过，它可以在其他浏览器（例如Firefox（Stable和Developer Edition））中正常工作。

Answer 3

在3月的更新中，我遇到了混合模式和不透明度的问题，添加了will-change对其进行了修复。

will-change: opacity;

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

Chrome中的Chrome css3混合混合模式错误

4 个答案: