Skip to content

Instantly share code, notes, and snippets.

@mrtcmn

mrtcmn/workaround.css

Created November 27, 2020 15:04
Show Gist options
  • Save mrtcmn/0490fb79fa63418e4409a99553f80e26 to your computer and use it in GitHub Desktop.
Save mrtcmn/0490fb79fa63418e4409a99553f80e26 to your computer and use it in GitHub Desktop.
Download ZIP
firefox backdrop-filter workaround
Raw
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);
}
}
@thexpand
Copy link

thexpand commented Mar 15, 2023 •
edited
Loading

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()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment