title: Why doesn't blur backdrop-filter work together with mask-image?
body: <p>I have a container div with <code>mask-image</code> set and two children div with <code>backdrop-filter</code> set:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;scroll-view&quot;&gt;
    &lt;div class=&quot;inner&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;inner&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>body {
    background-image: url(&quot;https://images.unsplash.com/photo-1653744971341-ae4a77618399?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTYzODM1OTM&amp;ixlib=rb-1.2.1&amp;q=80&quot;);
  }
  
  .scroll-view {
    width: 300px;
    height: 450px;
    border: 1px solid red;
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
    overflow-y: scroll;
  }
  .inner {
    backdrop-filter: blur(10px);
    width: 200px;
    height: 200px;
    margin: 50px;
    border: 1px solid green;
    background: rgba(255, 255, 255, 0.2);
  }
  </code></pre>
  <p>On scrolling the children, I expect them to be fading out at the top and bottom edge of the container. Also, the background under the children area should be blurred.</p>
  <p>But the blur filter doesn't get applied when <code>mask-image</code> is set. It only works when I comment out the <code>mask-image</code>, why?</p>
  <p>Here's the codepen snippet: <a href="https://codepen.io/perqin/pen/rNdNBmy" rel="nofollow noreferrer">https://codepen.io/perqin/pen/rNdNBmy</a>.</p>