Re: [css-compositing] why general blending is confusing

On 12 Oct 2013, at 5:15 pm, Dirk Schulze <dschulze@adobe.com> wrote:

> 
> On Oct 12, 2013, at 3:00 AM, Dean Jackson <dino@apple.com> wrote:
> 
>> As Adobe and Apple were looking into implementing blending in WebKit, we’ve exposed
>> a pretty good example of why it’s both tricky to implement and can produce unexpected
>> results (especially in today’s compositors).
>> 
>> Example file: https://bug-99200-attachments.webkit.org/attachment.cgi?id=214039
>> Screenshot: https://bug-99200-attachments.webkit.org/attachment.cgi?id=214040
>> 
>> Basically the issue is that you can only blend with your parent layer, and 
>> whether or not your parent has a layer is not so easy to plan around. In the example
>> I’m difference blending a vertical orange -> blue gradient over a horizontal
>> rainbow.
>> 
>> 1. Just the rainbow parent.
>> 2. Rainbow parent plus child with no blending
>> 3. Rainbow parent with child that does a difference blend
>> 4. Same as 4 but parent has a translateZ(0)
>> 
>> Notice that in 4, the child does NOT blend outside its parents bounds. That’s
>> because it doesn’t have any background pixels to blend with at that point. Sure, the
>> translateZ(0) forced a stacking context (compositing layer) on the parent, but
>> this could have happened for a number of reasons - e.g. a sibling of the parent
>> having a hover effect that triggered compositing.
>> 
>> I’m not sure there are any good ways around this without accumulating buffers
>> (potentially prohibitively expensive), and even then things like animations
>> and media will make it harder.
>> 
>> We might be stuck with background blending, and possibly controlling how element
>> content blends directly into its background (have we investigated that? it would
>> allow for things like text blending over an image background, which seems
>> pretty common)
> 
> From what you describe this is exactly the behavior that we agreed on to the last two F2F meetings. The behavior that you describe as "parent layer" is described as isolation to the next stacking context. I would not say that this is confusing. It is something that you can experience with isolation in other graphic applications as well.

I guess you have a higher bar for what is confusing :) I’m not sure these other graphics applications you have in mind support dynamic content and are supposed to run at 60fps - you can’t compare to Photoshop and Illustrator here.

<div>
  <div>   <— animate the opacity of this from 1 to 0
     <img blend>
  </div>
</div>

As soon as the animation started, the image stopped blending into its grandparent.

But it’s not just parent layers that can cause changes in behaviour.

<div>
  <div></div>
  <img blend>
</div>

Suppose the two children overlap. Again, change the opacity of the child div. Should the image be blending with its sibling?

As I said, if we think these issues are not a big deal, and we can all agree on behaviour then I’m ok it. I have a suspicion that we’ll find some edge cases with compositing between the browsers though.

> In future levels we get a new property value for 'isolation' that allows authors to blend with the whole backdrop, but first browsers need to catch up.

Catch up with what?

Dean

Received on Saturday, 12 October 2013 09:37:21 UTC