Help with backdrop filters

Hi all,

I’ve created the following site 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:

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?

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