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

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

> 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:-)
> 

Yes. But this is why we’re hesitant to add blending even though it would be extremely useful.

It’s quite funny really. Typically in these standards discussions we mostly understand how to implement and spend all our time arguing over the way to expose it to CSS/HTML/JS/etc. In the case of blending and backgdrop filters, the exposition is pretty uncontroversial - it’s the implementation details that are difficult and which either severely limit or confuse the feature.

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

Sure it’s possible. But the question is whether or not it is practical. I’d really like to expose this feature but I think it needs a bit of experimentation first.

BTW, I think you’re looking for CALayer.backgroundFilters [1]. 

Two things of note:

- "Typically this content belongs to the superlayer that acts as the parent of the layer.” This explains why it’s tricky in CSS. This feature is asking to apply an effect to *all* the content behind the element, not just its parent. (Also, due to complexities in CSS, an element’s parent in the compositing tree might not be it’s direct DOM parent).

- This does not apply on iOS (like I said, the window server does special magic to achieve the effect)

Dean

[1] https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/instp/CALayer/backgroundFilters