我有两个重叠的叠加层,叠加的部分使用混合混合模式混合。 在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;
}
答案 0 :(得分:11)
我有这个问题,发现它似乎是由混浊与混合混合模式的组合引起的。解决方案是将will-change: opacity
或transform: translateZ(0)
的规则添加到转换元素的父级。其中任何一个都可以,但我认为will-change
选项更可取(因为它不那么苛刻)。
在任何一种情况下,我认为效果是将该元素的绘制交给GPU(或者至少警告浏览器它可能被重新绘制),这似乎解决了这个问题。
Chromium bug追踪器中的this issue因为我指向正确的方向而被归功。
答案 1 :(得分:3)
我刚在最新的Chrome浏览器中遇到了mix-blend-mode
的问题(2020年3月,Windows 10 x64)
其中mix-blend-mode
对于带有负z-index
的后面元素将被忽略。不过,它可以在其他浏览器(例如Firefox(Stable和Developer Edition))中正常工作。
答案 2 :(得分:1)
在3月的更新中,我遇到了混合模式和不透明度的问题,添加了will-change对其进行了修复。
will-change: opacity;
答案 3 :(得分:-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;
}