我有两个重叠的叠加层,叠加的部分使用混合混合模式混合.
在chrome中应用了效果但是使用此属性的div有奇怪的闪烁.
这是闪烁的原因以及如何解决.
我已经在firefox上测试了它的良好运行但不是在chrome中.
在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;
}
解决方法
我有这个问题,发现它似乎是由混浊与混合混合模式的组合引起的.解决方案是添加一个将改变的规则：不透明度,或者将transformZ(0)转换为转换元素的父级.其中任何一个都会这样做,但我认为改变意愿的选择是可取的(因为它不那么狡猾).
在任何一种情况下,我认为效果是将该元素的绘制交给GPU(或者至少警告浏览器它可能被重新绘制),这似乎解决了这个问题.
归功于Chromium bug追踪器中this issue的信用指示我指向正确的方向.
