Help with backdrop filters

Design help General
1

Hi all,

I’ve created the following site arnoldstudio.net and implemented a backdrop filter on the dropdown navigation. The filter works on Safari, but not on Chrome / Firefox.

I know the issue isn’t with the browsers and I cannot find out a fix. Ive used Chrome dev tools and the filter seems to be visible in the code.

Any help would be appreciated.

Read only:
https://preview.webflow.com/preview/arnold-studio?utm_medium=preview_link&utm_source=designer&utm_content=arnold-studio&preview=8a6241e86e641fc4aef041b985749829&workflow=preview

2

Found this on StackOverflow:

I had this issue and it took very long to fix. In my case there were two culprits: opacity and drop-shadow. Setting opacity breaks the blur effect so you should (just like in this answer) use rgba(r, g, b, *opacity here*). Second one is drop-shadow. If the element I wanted to blur also had drop-shadow it adds shadow but blur disappears. I hope this helps.

Does your blurred element use opacity? Maybe eliminate and swap out for a color that uses transparency instead?

3

Thanks for your time looking. Ive already got the transparency set within the colour swatch, not opacity.