CSS3铬镀铬混混合模式的bug [英] Chrome css3 mix blend mode bug in chrome

问题描述

我甲肝两个叠加层相互重叠和所述重叠部分被乘用混合混合模式混合。
Chrome的应用效果，但有一个与这个属性的div奇怪的闪烁。
什么该闪烁，以及它如何的原因可以解决的。
我已经在Chrome测试了它在Firefox其良好的运行，但不！

截图

以上图像动画曾经获得超过一次，并对其做了左格开始不断闪烁。

 ＆LT; D​​IV CLASS =底部横幅WR-FL＆GT;
        ＆LT; D​​IV CLASS =左覆盖叠加＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =右重叠覆盖＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =中心标题为＆GT;
            {{entry.bottom_banner.banner_heading}}
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    .bottom横幅。左，覆盖
    {
        混合 - 混合模式：乘;
        背景：RGBA（0,54,108,0.7）;
        变换：歪斜（-25deg）;
        的z-index：11;
        左：-280px;    }
    .bottom横幅.right的覆盖
    {
        宽度：500像素;
        变换：歪斜（-25deg）;
        右：-600px;
        动画：slideinbottom 2秒;
        背景：红色;
        混合 - 混合模式：乘;
    }
 

解决方案

它完全可以在所有的浏览器试试这个

.bottom横幅。左，覆盖
    {
       -webkit-混合的混合模式：乘法;
       -moz-混合的混合模式：乘法;
       -o - 混合 - 混合模式：乘法;
       -ms - 混合 - 混合模式：乘法;
        混合 - 混合模式：乘;
        背景：RGBA（0,54,108,0.7）;
        WebKit的变换：歪斜（-25deg）;
        -moz-变换：歪斜（-25deg）;
        -ms变换：歪斜（-25deg）;
        变换：歪斜（-25deg）;
        的z-index：11;
        左：-280px;    }
    .bottom横幅.right的覆盖
    {
        宽度：500像素;
        -webkit-变换：歪斜（-25deg）;
        -moz-变换：歪斜（-25deg）;
        -ms变换：歪斜（-25deg）;
        变换：歪斜（-25deg）;
        右：-600px;
        -webkit-动画：slideinbottom 2秒;
         -moz-动画：slideinbottom 2秒;
          -ms动画：slideinbottom 2秒;
           -o-动画：slideinbottom 2秒;
           动画：slideinbottom 2秒;
        背景：红色;
        -webkit-混合的混合模式：乘法;
       -moz-混合的混合模式：乘法;
       -o - 混合 - 混合模式：乘法;
       -ms - 混合 - 混合模式：乘法;
        混合 - 混合模式：乘;
    }


I hav a two overlays which overlap each other and the overlayed part is blended using mix blend mode multiply. In chrome the effect is applied but there is strange flickering of the div with this property. whats the reason for this flickering and how it can be solved. I have tested it on firefox its good running but not in chrome.!

Screenshot

The above image is once animation gets over and once its done the left div starts blinking continuously.

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

解决方案

it will work on all browsers try this

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

这篇关于CSS3铬镀铬混混合模式的bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！