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

Question

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.

Stumble

Answer 1

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 */
}

Illstarred

Worked for me (Chrome 91) when I added this to the parent of the mix-blend-mode element. Thanks for the tip! – Keyser

Answer 2

The previous solution also worked for me (Chrome 93). Although I've had to wrap my element inside another and apply the mix-blend-mode to it to make it work like so:

.wrapper {
  mix-blend-mode: multiply;
}
    
.blend { 
  backdrop-filter: opacity(1);
}

Save me a lot of hours. Thanks a bunch!

Vertebral