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

On Thu, Sep 19, 2013 at 10:08 AM, Dean Jackson <dino@apple.com> wrote:

>
> On 18 Sep 2013, at 1:05 pm, Dirk Schulze <dschulze@adobe.com> wrote:
>
>
> > I suggest adding a new keyword 'backdrop' as CSS Image. This can be
> filtered with the CSS Image filter()[3] function and blended with
> background colors or background images and the 'background-blend-mode'
> property. This would produce results where the backdrop directly behind the
> element would always be blurry, but around the element it isn't. This looks
> even nicer on scrolling and other interactions.
>
> I think I suggested a separate property: background-filter (I can’t
> remember if I emailed this, or spoke up at a meeting, or just thought of it
> in the shower).
>
> The reason is that I think in most cases you want to draw normally and
> just apply the effect to the background. There is no need to consider the
> content of the element to be filtered for this effect. However, the name is
> a bit misleading because, as you know, it is not filtering the element’s
> background (in CSS terms), but its backdrop.
>

I've been seeing this effect use more lately. Designers have to create it
manually or emulate it with CSS filters and careful overlapping of
elements. Maybe it's time to make it a simple CSS property like you propose.

All cases I've seen so far, apply the background blur over a rectangular
region. Earlier in the thread, I suggested that the effect should only
apply to the shape/coverage area but maybe that makes it too hard to
implement.



> [Aside: I know that we proposed primitive blending and transformation
> operations for shorthands in the early days, so you could apply a filter
> and blend it into an unfiltered form of the element.]
>
> > As a note, this keyword would still need to rely on the definition of
> isolation groups[4]. Every element creating an isolation group because it
> has a stacking context or the 'isolation' property set to 'isolate', will
> have direct effect on this keyword and the requested backdrop. (The same
> way as it influences the 'mix-blend-mode' property[5].)
>
> So, here is where it gets tricky. Background/drop filtering is quite
> expensive, and sometimes extremely expensive in some compositing set ups.
> In the worst case a browser will have to draw the tree twice, possibly
> reading back pixels before applying the effect. And that could be per
> element that has a filter. We can define isolation groups to make this
> easier, but this will be quite difficult to understand.
>
> In our experimentation it’s quite confusing that changes in sibling
> elements or random properties can trigger a situation where the background
> becomes difficult to obtain or radically slower.
>

Yes, we were trying to avoid the pain by making stacking contexts isolated
groups. It turns out that we're still running into problems and we have to
solve it anyway.
So, we will have to compute the backdrop, which is also the hardest problem
for background blurring.


> Window servers often do these effects with tricky hacks. Their content is
> also nowhere near the complexity that a Web page can be.
>
> I guess I’m saying that, like blending/compositing, I’d really love to
> expose this, but it could be a pain to implement and difficult to author.


On the blink side at least, it seems that we can go the "difficult to
implement but easy to author" route.
Maybe there is a way to do the same in WebKit?