Background blur not working properly

Design help Custom code
1

Hi!

Running into a vexing problem. I’m trying to use backdrop-filter: blur, but I’m having some issues. Sometimes it works, and sometimes it doesn’t. Some elements get blurred, others don’t. The functionality even changes based on which breakpoint is active. For instance, my menu bar blurs out everything beneath it at larger sizes, but only certain elements (specifically embedded ones) on the default breakpoint. This is only an issue on the homepage.

Also, none of these issues occur in Safari—only in Chrome and Opera. Firefox doesn’t appear to support the functionality at all (at least by default).

Any ideas on what could be causing this inconsistency?

Thanks in advance.

Here is my site Read-Only: https://preview.webflow.com/preview/bennyjohnson-com?utm_medium=preview_link&utm_source=designer&utm_content=bennyjohnson-com&preview=45de67af81b3b9a6c642091b4a589f20&mode=preview
([how to share your site Read-Only link][2])

1 Like
2

I’m having this same issue. Did you ever find a solution to this?

3

Same problem, worked fine then started to see holes.

4

Same problem, no solution.

5

The backdrop filter CSS property is not fully supported by all browsers at this time.

6

Replying for bump, also here’s my read only

7

Having this issue in Safari… is it not supported in this browser anymore?

8

I have the same issue.

9

I am an absolute beginner, and I faced the same issue. I am working on Google Chrome.
Here is how I seem to have fixed it - at least for now.
I had to use the background color to change the opacity, but not in the Effects section.
With that and the Effects opacity back to 100%, the blur effect I use in the backdrop filter works perfectly.
Hope this newbie fix works for you as well. Lots of success.