фильтр: черно-белый, не всегда работает в Краю

Question

я могу видеть, что это работает на веб-сайте компании Microsoft: https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/css3filters/

Но на сайте я в настоящее время работаю, он работает только несколько раз.

Например, когда я удаляю max-width на ярлыке img, оттенки серого внезапно срабатывают, но затем, когда я нахожу его, он перестает работать.

Фильтр был первоначально на теге img, но я также пробовал на div с тем же результатом.

Я знаю, что это может быть слишком конкретный случай, но я не могу найти ничего связанного с этим, что может сработать. Есть ли какие-то свойства, которые, как известно, возились с фильтрами в Edge?

РЕДАКТИРОВАТЬ

После настройки вокруг в инспекторе, я обнаружил, что скрывает псевдо-элемент решает полутоновую ошибку.

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

Answer 1

Наконец нашел виновника, удаление г-индекс от моего псевдо-элемента очищал ошибка.

Помещение z-индекса на каждый элемент, чтобы конкретно рассказать заказ, а не полагаться на настройки браузера, разрешило проблему применения фильтра оттенков серого.

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