0

So in my web app I have a menu which I like to display with a bit of transparency and background blur, and it's always worked great, but yesterday I noticed that Chrome is rendering the menu differently now and I'm wondering if that's a bug or a permanent change that would require me to change my code.

I'm comparing here Chrome version 85.0.4183.102 and Edge version 85.0.564.51. Note that this is not the original Edge browser which many people still have on their windows computer, but this is the "New" Edge which uses the same rendering engine as Chrome.

In Edge the menu looks like this (and it used to look like this in Chrome as well)

enter image description here

Now, this is how it looks in Chrome

enter image description here

This is my CSS

.menubaroptions {
    backdrop-filter: blur(6px);
    opacity: 0.85;
}

Now if I change the opacity to 0.95 then it looks good in Chrome (although the blur setting seems to be completely ignored now as well), but obviously then I lose almost all the transparency in Edge. Has anybody else noticed this change? Am I right to assume that Edge, in the next update, will also use this new opacity calculation? Is there some standard that has changed, or is this a bug in Chrome?

Vincent
  • 1,741
  • 23
  • 35
  • I use the same versions of Chrome and Edge with you but I can't reproduce the issue. They look the same in Chrome and Edge. You can check this sample in Chrome and Edge: https://www.w3schools.com/code/tryit.asp?filename=GIREQ2OXD75D. – Yu Zhou Sep 15 '20 at 08:21
  • Thanks for the sample code Yu. You're right, that your sample looks the same on both browsers but your example with 85% opacity looks similar to my problem on Chrome, and much more transparent than my 85% looks on Edge, yet your example on Edge looks the same as my example on Chrome. Ugh. – Vincent Sep 15 '20 at 16:15

0 Answers0