Backdrop filter not working when mix blend mode of another element on the page is changed

The browser and version number is Chrome 87.0.4280.88

Here is how we accidentally detected this bug:

• There are two independent divs on the page and both are position: fixed;
• One of them has a hover effect with which its mix-blend-mode is changed.
• The other one has glassmorphism style on it with backdrop-filter: blur(...px);
• The filter works only when the other element on the page is set to mix-blend-mode: normal; otherwise it looks like as if it was not supported.

It would be nice to let the world know if there is an easy solution.

Came across this bug as well (Chrome 90).

Quick Fix:

Add any backdrop-filter rule to the same element that has the mix-blend-mode rule applied.

Example:

.blend {
  mix-blend-mode: difference;
  backdrop-filter: opacity(1); /* fixes the chrome-bug */
}