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

Posted 2023-03-06

【中文标题】chrome中的Chrome css3混合混合模式错误

【英文标题】：Chrome css3 mix blend mode bug in chrome

【发布时间】：2015-08-09 08:29:05

【问题描述】：

我有两个相互重叠的叠加层，叠加部分使用混合混合模式乘法混合。 在 chrome 中应用了效果，但是具有此属性的 div 会出现奇怪的闪烁。 这种闪烁的原因是什么以及如何解决。 我在 Firefox 上测试过它运行良好，但在 chrome 中没有。！

Screenshot

上图是动画结束后，左侧的 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;
    

【问题讨论】：

这是我的 html 和 css3 代码

闪烁通常用backface-visibility: hidden;w3schools.com/cs-s-ref/css3_pr_backface-visibility.asp之类的东西解决

【参考方案1】：

我在 3 月的更新中遇到了混合模式和不透明度的问题，添加 will-change 为我解决了这个问题。

will-change: opacity;

【参考方案2】：

我刚刚在最新的 Chrome（2020 年 3 月，Windows 10 x64）中遇到了mix-blend-mode 的问题 其中mix-blend-mode 被简单地忽略后面带有负数z-index 的元素。但它在其他浏览器（如 Firefox（稳定版和开发版））中也能正常工作。

【参考方案3】：

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

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

感谢 Chromium 错误跟踪器中的 this issue 为我指明了正确的方向。

【讨论】：

这仍然是chrome 73 android中的一个问题，通过this answer解决。谢谢！

确保用这个测试溢出/滚动内容。 will-change 使混合模式工作，但是有一个单独的错误会导致在使用混合混合模式时溢出的内容消失。 bugs.chromium.org/p/chromium/issues/detail?id=798148#c3

will-change 为我工作，但在同一个元素上，而不是父元素。对于那些最近发现这个问题的人来说，Chromium Bug 跟踪器上有关于这个问题的错误报告：bugs.chromium.org/p/chromium/issues/detail?id=961581 但不幸的是，这种解决方法不适用于 SVG。

这解决了我在 Safari 中的一个问题，即 mix-blend-mode 在旋转后无法正常工作。

【参考方案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;
    

【讨论】：

问题与跨浏览器兼容性无关。正如OP所示；混合模式在 Chrome 中有效，但有闪烁。

IE 或 Edge 根本不支持混合模式。这不是兼容性问题，这是一个 chrome 错误。