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

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

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

Stacking contexts are indeed hard to grock for authors.
I wish there was a way to clearly show them in the inspector to make them
less surprising. z-index for instance gets complex very quickly.

If authors use tools like Photoshop or Illustrator, they should already
familiar with the concept of group isolation. So, if the tools improve and
we can

As you point out, the advantage of having just blending within your parent
is better performance. (Flash for instance had the same limitation so it
could speed up rendering)
At a later point, the 'isolation' property will be extended so we can
implement the natural non-isolated model. [1]


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

I agree.


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

Yes. Thanks!


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

Yes. that's how the blending spec defines it too.


>
> - This does not apply on iOS (like I said, the window server does special
> magic to achieve the effect)
>
>
1: http://dev.w3.org/fxtf/compositing-1/#isolation