Skip to content

Instantly share code, notes, and snippets.

@mrtcmn
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.
firefox backdrop-filter workaround
@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);
}
}
@lorenzodelijser
Copy link

Thanks. This works great!

@smohammadhn
Copy link

Works like a charm!

@josimara-lima2
Copy link

Obrigada por compartilhar uma excelente alternativa para este problema.

@moon-lab-studio
Copy link

Thanks, works perfectly! Thanks for teaching me how to use @supports as well.

@hey-rahul
Copy link

Thanks!

@JoaoOliveira85
Copy link

Wouldn't only using:

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

Have the same exact behaviour as using this?

@team3rddigital
Copy link

s

@iam-gopi
Copy link

Awesome that works

@thexpand
Copy link

thexpand commented Mar 15, 2023

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