backdrop-filter not working under a mask on chrome

Question

I need to mask an image. The mask should reveal an image after applying a blur effect to it. To achieve this i have created a div element with the property mask-image (also -webkit-mask-image). Inside this div there is another div with the property backdrop-filter (also -webkit-backdrop-filter).

Everything works perfectly on Safari, i can see the mask zone blurring the image, but on Chrome(mac and windows) and Firefox(tried only on windows) the backdrop-filter doesn't work anymore. I can say that the mask is working because if i set a background-color to the blurring div after removing backdrop-filter i can see the mask colored.

Here is an example https://jsfiddle.net/tomthebearded/9nwm7k4g/40/ .

.background,
.foreground {
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  top:0;
  position: relative;
  z-index: -1;
}

img {
  width: 100%;
  height: 100%;
}

.mask {
  -webkit-mask-size: 300px;
  -webkit-mask-position-x: 100px;
  cursor:crosshair;
  position: absolute;
  -webkit-mask-image: url('....');
  mask-image: url('...');
  z-index: 10;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.blur {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

I need to keep this html structure.

<div class="background">
  <img src="..." />
</div>

<div class="foreground mask">
  <div class="blur"></div>
</div>

Is there another way to achieve this?

Thank you in advance.

Answer 1

Quoting answer I received on bugs.chromium.com:

According to the spec [1], mask-image creates a backdrop root, and the backdrop-filter applies to the backdrop root only (ie not applying to the view background).

[1] https://drafts.fxtf.org/filter-effects-2/#BackdropRoot

Source

Interesting thing is that it works as desired on Safari, which implies they don't follow the spec but for good