filter:grayscale not always working in Edge
<p>I can see it working on Microsoft's website: <a href="https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/css3filters/" rel="nofollow noreferrer">https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/css3filters/</a></p>

<p>But on the website I am currently working on, it only works some times.</p>

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

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

<p>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?</p>

<p><strong>EDIT</strong></p>

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

<pre><code>.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;
}
</code></pre>

<p><strong>Code sample</strong></p>

<pre><code>&lt;div class="Cta"&gt;
    &lt;div class="cta-image"&gt;
        &lt;img src="{{baseUrl}}{{image}}" alt="{{title}}" /&gt;
    &lt;/div&gt;
    &lt;div class="cta-content"&gt;
        &lt;h3 class="cta-title"&gt;{{{title}}}&lt;/h3&gt;
        &lt;h4 class="cta-subtitle"&gt;{{subtitle}}&lt;/h4&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.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;}
</code></pre>