W3C home > Mailing lists > Public > www-style@w3.org > October 2013

[css-compositing] why general blending is confusing

From: Dean Jackson <dino@apple.com>
Date: Sat, 12 Oct 2013 12:00:27 +1100
Message-id: <C55A8820-343D-45EA-91A2-24D7ADA76FDA@apple.com>
To: www-style list <www-style@w3.org>
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)

Dean
Received on Saturday, 12 October 2013 01:00:58 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:51:03 UTC