firefox backdrop-filter workaround

workaround.css

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .blurred-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .blurred-container {
    background-color: rgba(255, 255, 255, .8);
  }
}

s

Awesome that works

Tested on Firefox v110 and v111 - it no longer respects the @supports operator.
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) falsely reports true on those versions of Firefox.

Respectively, @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) falsely reports false.

UPDATE:
I ended up using the following CSS code to target Firefox specifically:
@-moz-document url-prefix()