backdrop-filter:blur not working correctly if another element uses mix-blend-mode

I have an element which has backdrop-filter: blur(10px); applied. this works fine, until another element in the dom uses mix-blend-mode. than the blur is somehow mixed with the unblurred version.

this happens in chrome and in edge. firefox seems to work. is this buggy behaviour of the browsers?

i tested it in codepen with this small example. as soon as you add the mix-blend-mode the blur issue occurs.

#blur {
  position:fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(10px);
}
#filter {
  mix-blend-mode: difference;
}

<div>
<h1>Hello world!</h1>
</div>
<div id="filter">
</div>
<div id="blur"></div>

is there something i am missing?

Blend-modes will give you a wide range of effects depending upon the attributes of the objects in the stacking order. Similar to Photoshop layers, using different background colors, gradients, and alpha transparency in combination with layer modes will generate a wide range of results. Although, browsers may not render them exactly the same (which is expected IMO).

Also, changing the color of the text to white will enable "difference" to have an effect in this example.

#blur, #filter {
  position:fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#blur {
  background: #3339;
  backdrop-filter: blur(5px);
}
#filter {
  background: radial-gradient(circle, rgba(0,100,200,1) 0%, rgba(0,100,200,.7) 30%, rgba(0,100,200,0) 90%);
  background-color: aqua;
  mix-blend-mode: difference;
}

<div>
<h1 style="color: white;">Hello world!</h1>
<h2 style="color: white;">Hello world!</h2>
<h4 style="color: white;">Hello world!</h4>
</div>
<div id="filter"></div>
<div id="blur"></div>