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.
>

Maybe backdrop-filter is less confusing.


>
> [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.
>

Well, we're already there with CSS filters and blending:-)


>
> 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.
>
> 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.


Would it be possible to implement this practically on Safari? I thought
there was an API to do apply a filter during compositing but I can't find
it in the documentation.