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

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.

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

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.

Dean

Received on Thursday, 19 September 2013 17:08:57 UTC