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

user_11466287 0
Viewed 1128

The browser version is Chrome 87.0.4280.88

Here is how I 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.

I am going to quit using that hover effect for now anyway but if there is a trick then it would be nice to let the world know about it.

css-filters mix-blend-mode
2 Answers

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

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!

user_23639680
Related