Re: [css-images][css-compositing] Blurring an element’s backdrop

On Thu, Jul 17, 2014 at 6:11 PM, Bobby Mozumder <mozumder@futureclaw.com>
wrote:

> Is there any resolution to this thread about blurring/diffusing the
> element’s backdrop to mimic Aero-glass & iOS 7?  I’m looking at the
> Compositing-1 spec and it looks like there’s no “blur” option in
> <blend-mode>, which is where we would expect it to be.  There’s also
> nothing in the Filters spec on backdrop, only backgrounds.
>
> It appears discussion about this died off last December.  Also the Custom
> Shaders feature were removed from the spec due to security issues in
> January, so that option is gone.
>
> There’s a bigger demand for this blur feature by designers than any of the
> other blend modes, as a lot of designers are trying to duplicate that
> Aero-glass look.  Any site with a white, partially transparent Bootstrap
> header bar likely tried to get it to blur but gave up.
>
> Examples of designers facing this problem:
> http://stackoverflow.com/questions/14565520/background-blur-with-css
>  (solution only for Mozilla, and needs scrolling scripts)
> http://css-tricks.com/frosting-glass-css-filters/  (this hack only for
> fixed image backgrounds)
>
> Anyways thanks for your consideration of this.
>

Hi Bobby,

some people on my team recently did a study on this:
http://blogs.adobe.com/webplatform/2014/07/10/lean-experiment-overlay-effects/

Please comment on the blog post (or here) if you disagree with their
findings.

The biggest obstacle is that backdrop blurring is an expensive operation
that is not available on all platforms. With enough support we can likely
lobby for its adoption but it will take time.