Strange bug on Chrome with backdrop-filter blur

Problem: unexpected behavior on Chrome with Windows zoom setting to 125% or more, all fine with 100%, it stop bluring in the bottom half of the screen, what could it be? https://codepen.io/Giusto-the-typescripter/full/rNRPavJ
14 Replies
MarkBoots
MarkBoots4mo ago
i can not reproduce it. You have a screenshot
Giustomuh
Giustomuh4mo ago
Sure give me a sec
Giustomuh
Giustomuh4mo ago
No description
No description
Giustomuh
Giustomuh4mo ago
As you can see in the second pic the bottom part is not blurred, also if a reduce the window size the same is for the right side, to reproduce you might need to change the Windows settings and put the zoom to 125% or more Windows as OS not as Chrome window
MarkBoots
MarkBoots4mo ago
yea, i tried that, but still it looks okay. maybe wait for other people to see this post
Giustomuh
Giustomuh4mo ago
which resolution do you have on your monitor?
MarkBoots
MarkBoots4mo ago
No description
No description
Giustomuh
Giustomuh4mo ago
ok thanks, which version of chrome are you using?
MarkBoots
MarkBoots4mo ago
121.0
Giustomuh
Giustomuh4mo ago
ok thank you for your time!
capt_uhu
capt_uhu4mo ago
hey, i'm on windows 11 with chrome 121 and getting the buggy (non blurred) behavior even at 100% zoom. This seems like it might be a GPU related thing? Might be worth filling a chrome bug? Looks like lots of issues with backdrop-filter rendering: https://issues.chromium.org/issues?q=backdrop-filter%20 maybe try <canvas> instead of with CSS?
Giustomuh
Giustomuh4mo ago
thank you for your answer, yeah i was thinking to fill a chrome bug but i'm scared that I don't know enough to look serious, you know i dont wanna be "that guy" i'll give it a try
capt_uhu
capt_uhu4mo ago
only other thought i had was it looks like you're animating top and left I wonder if transform:translate might get around the issue
Giustomuh
Giustomuh4mo ago
Mmh I don't think, I'm animating blob not blur