- From: Dean Jackson <dino@apple.com>
- Date: Sat, 12 Oct 2013 12:00:27 +1100
- 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