html - CSS: Workaround to backdrop-filter?

Question

backdrop-filter is a recent CSS feature, that is not yet available in modern browsers (at least as of July 1, 2016).

• Chrome 51 supports backdrop-filter via Experimental Web Platform flag.
• Safari 9.1 supports it with -webkit- prefix
• Firefox 47 have no support

Being in such an unusable state, I would like to know whether there exists any alternative way to bring in the same result.

JS workarounds for blur, grayscale,… are also welcome

The development of backdrop-filter can be tracked through https://bugs.chromium.org/p/chromium/issues/detail?id=497522

Answer 1

I use this to get the popular frosted glass effect. Until someone successfully invents a good polyfill for backdrop-filter I'm using a slightly transparent background as a fallback:

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

The filter will work in currently supported browsers. (Safari and Chrome with experimental Web Platform features enabled) The code should also work in future browsers that support unprefixed backdrop-filter if the spec doesn't change before that.

Examples without and with backdrop-filter support: