Help with backdrop filters

[Seb_Andreas (Sebastian Andreas)]

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

[Port_of_Folio]

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?

[Seb_Andreas (Sebastian Andreas)]

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

[Port_of_Folio]

I see this was a 1.5 years ago. Now works as expected in Chrome. Firefox still missing the blur though. Did you change something during that time?

[Port_of_Folio]

Do you know where this grey field comes from? Looks like a drop shadow below?