4

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.

HolyResistance
  • 594
  • 1
  • 8
  • 26

2 Answers2

7

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 */
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
Jörg Lehmann
  • 71
  • 1
  • 2
  • Worked for me (Chrome 91) when I added this to the parent of the mix-blend-mode element. Thanks for the tip! – ivanreese Jun 11 '21 at 05:08
0

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!

Lornz
  • 1
  • 1