CODEWITHSUNDEEP
css-filtersmix-blend-mode
TheNightwalker
TheNightwalker

Reputation: 671

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.

Upvotes: 5

Views: 3664

Answers (2)

Lornz
Lornz

Reputation: 1

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!

Upvotes: 0

Jörg Lehmann
Jörg Lehmann

Reputation: 116

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

Upvotes: 10

Related Questions