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

On Sep 19, 2013, at 8:01 PM, Rik Cabanier <cabanier@gmail.com> wrote:

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

I think my point is that just filtering often is not enough. You often want to blend the result with a color or an image and use that as a background.

>From the implementation point of view, you may indeed want to have operations on backdrop right before drawing the rest of the element. This makes it a lot easier to access the backdrop without a real image buffer in software. In other words background-image: url(image1.png), filter(backdrop, blur(5px)) is harder to implement than doing the backdrop operation right at the beginning.

So I am not opposed to backdrop-filter property, but assume that you want to combine it with blending of the background of the element somehow.

Greetings,
Dirk

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

Received on Thursday, 19 September 2013 18:24:15 UTC