filter:grayscale并不总是在Edge中工作 [英] filter:grayscale not always working in Edge

问题描述

我可以在Microsoft网站上看​​到它的运行情况: https ://developer.microsoft.com/zh-CN/microsoft-edge/testdrive/demos/css3filters/

I can see it working on Microsoft's website: https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/css3filters/

但是在我目前正在使用的网站上，它只能运行几次.

But on the website I am currently working on, it only works some times.

例如，当我删除img标签上的max-width时，灰度突然起作用，但是当我将其悬停时，它停止工作.

For example, when I remove max-width on the img tag, the grayscale suddenly works, but then when I hover it, it stops working.

该过滤器最初位于img标签上，但我也尝试了一个具有相同结果的div.

The filter was originally on an img tag, but I also tried on a div with the same result.

我知道这可能是一个非常具体的案例，但是我似乎找不到与此相关的任何东西可能有用.是否有一些已知的属性会弄乱Edge中的过滤器?

I know it might be too specific a case, but I can't seem to find anything related to this that might work. Is there some properties known to mess with filters in Edge?

编辑

在检查器中进行了调整之后，我发现隐藏伪元素可以解决灰度错误.

After tweaking around in the inspector, I have found that hiding a pseudo-element solves the grayscale bug.

.Cta:before {
    position: absolute;top: 50%;left: 0;right: 0;bottom: 0;
    display: block;content: '';z-index: 1;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));
    background: -webkit-linear-gradient(top,hsla(0,0%,100%,0),#fff);
    background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff);
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

代码示例

<div class="Cta">
    <div class="cta-image">
        <img src="{{baseUrl}}{{image}}" alt="{{title}}" />
    </div>
    <div class="cta-content">
        <h3 class="cta-title">{{{title}}}</h3>
        <h4 class="cta-subtitle">{{subtitle}}</h4>
    </div>
</div>

CSS:

.Cta {position:relative;}
.Cta .cta-image {filter:grayscale(100%);opacity:0.2;}
.Cta img {display:block;width:100%;}
.Cta .cta-content {position:absolute;bottom:0;left:0;right:0;padding:0 30px 30px;}

推荐答案

最后找到了罪魁祸首，从我的伪元素中删除了z-index可以清除该错误.

Finally found the culprit, removing the z-index from my pseudo-element was clearing the bug.

在每个元素上放置z-index以明确地指示顺序，而不是依赖于浏览器默认值，从而解决了不应用灰度滤镜的问题.

Putting z-index on each element to specifically tell the order instead of relying on browser defaults resolved the problem of the grayscale filter not being applied.

.Cta {position:relative;}
.Cta:before {position:absolute;top:50%;left:0;right:0;bottom:0;z-index:2;content:'';background:/*gradient*/;}
.Cta .cta-image {position:relative;z-index:1;filter:grayscale(100%);opacity:0.2;}
.Cta img {display:block;width:100%;}
.Cta .cta-content {position:absolute;bottom:0;left:0;right:0;z-index:3;padding:0 30px 30px;}

这篇关于filter:grayscale并不总是在Edge中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！