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

我有两个重叠的叠加，叠加的部分使用混合混合模式乘法混合。在铬效果应用，但有这个属性的div奇怪的闪烁。这是什么原因闪烁，以及如何解决。我已经在Firefox上测试过它的运行良好，但不是在Chrome中。Chrome css3混合混合模式在铬中的错误

Screenshot

上面的影像是一次动画越过，一旦其完成了左格开始不断闪烁。

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

来源

2015-05-27 kailash yogeshwar

提供代码，请 –

这就是我的HTML和CSS3代码 –

闪烁通常与像'背面能见度解决：隐藏;' http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp – Craig

-2

它将在所有浏览器试试这个

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

来源

2015-05-27 13:57:55

问题与跨浏览器兼容性无关。正如OP所示;混合模式适用于Chrome，但闪烁。 – Craig

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

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

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

Chromium错误跟踪器中的this issue归因于指向正确的方向。

来源

2016-07-19 18:34:57

will-change：opacity;完美地工作。谢谢！ –

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

回答

相关问题