- From: fantasai <fantasai.lists@inkedblade.net>
- Date: Thu, 27 Jun 2013 18:25:06 -0700
- To: "www-style@w3.org" <www-style@w3.org>, www-svg <www-svg@w3.org>, "public-fx@w3.org" <public-fx@w3.org>
These are the official CSSWG minutes. Unless you're correcting the minutes, *Please respond by starting a new thread with an appropriate subject line.* Compositing and Blending ------------------------ Reviewed Compositing and Blending draft, which now contains only 3 CSS properties: mix-blend-mode, isolation, background-blend-mode Discussed use cases, design, interaction with stacking contexts, forwards-compatibility, etc. The draft needs more review. Meanwhile, RESOLVED: Publish updated WD of Compositing and Blending Level 1 ====== Full minutes below ====== Scribe: fantasai Compositing and Blending Level 1 -------------------------------- <cabanier> https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html cabanier: Last year in Hamburg, made a proposal cabanier: Since then trying to simplify the spec, to make sure can be implemented easily in browsers cabanier: Removed compositing in CSS cabanier: areas, removed that as well cabanier: also knock-out feature removed, because hard to implement cabanier: Only 3 properties left in CSS: mix-blend-mode isolation background-blend-mode cabanier: Change to background-blend-mode: only defines how backgrounds blend with each other. Simpler to implement. cabanier: mix-blend-mode also restricted only to things inside its stacking context cabanier: Also specs out canvas cabanier: different blend modes for canvas cabanier: implemented in FF, webkit cabanier: patches <jerenkrantz> what was the URL for that demo? cabanier shows off demo of canvas and different blend modes <jerenkrantz> Link appears to be: http://codepen.io/adobe/pen/nmfic cabanier: If there's content behind this box, won't affect blending with that content cabanier: Third feature is blending of elements cabanier: shows some text over an image, with different blend modes cabanier: Want to know if people are keen cabanier: mix-blend-mode creates a stacking context cabanier: and will blend only with things inside its stacking context dbaron: Part of what I was proposing was creating a stacking context dbaron: I would need to think more about blending only with things in its stacking context. dbaron: It's probably okay cabanier: Talked to roc and ppl on Chrome compositor team cabanier: roc def ok with this, Chrome team seemed ok with it dbaron: Other concern was, are there enough use cases for background-blend-mode to justify a separate property dbaron: Can certainly make some nice demos with it, but how many real author use cases will it work for? cabanier: If you want a gradient e.g. that goes over an image, or enhance contrast of an image dino: Question is, why not use tool offline cabanier: If you want to animate it, hard to do with a tool dino: One of my concerns is, seems like background-blend-mode will be easiest to implement, and ppl will use backgrounds as content because they want this effect krit: ... krit: text blended with background, very strong use cases krit: moreso in SVG world, because of different shapes krit: In HTML itself, text is very strong use case cabanier: They're talking about backgrounds krit: oh cabanier: It could be extended later cabanier: Some people made proposals wrt adding filters on top of it cabanier: could come in nicely krit: Filter has filter image functions krit: This could also be blended krit: ... isolation group krit: If you have different background layer, [...] krit: Filter effects has a filter() function, which takes CSS image as input krit: And can be animated krit: You can have different layers in background, some filtered, and can be blended with other layers cabanier: background-blend-mode is much lighter cabanier: using mix-blend-mode for this would create lots of layers <cabanier> http://codepen.io/seraphzz/pen/houAe <jerenkrantz> (the seraphzz pen link doesn't seem to work with FF 21; but the adobe link does w/FF 21.) dino: ... not as powerful or useful. mix-blend-mode is what we really want to expose, but is very powerful and complicated krit: I think we can agree mix-blend-mode is the most important krit: As specified, not so complicated dino: With disadvantage that authors have to understand when a stacking context may or may not appear in their content dino: Expect that rounds down to 0% of authors. ... dino: As soon as you hover over a div, that because its opacity changed, blending mode changed cabanier: we want to be able to do that later, though. And might be able to use new value of 'isolate' property. krit: I think we agreed that we wanted to have full backdrop blending. But know it's hard to implement at this point. krit: Saying "these properties create an isolation group", don't have to know about stacking contexts dino: that's handling it in one way dino: You specify starting blending ... dbaron: Disagree with Rik's comment wrt adding ability to blend with opacity later dbaron: Once you have CSS properties working a certain way, pages depend on things working that way, can't go back and change it later heycam: Would add a new value to isolation dbaron: does the new value go on the element being blended or the one making the stacking context? ?: new value goes on element making the stacking context dbaron: Kindof ugly cabanier: Could wait a few years, or have something useful now heycam: Is it bad to have this new isolation property value on the element that creates the stacking context? heycam: Or would you want to specify that where you're putting the blending operation? dbaron: no, it makes sense that it goes on the element forming the stacking context dbaron: Think people will probably put * { isolation: new-value; } and not worry about it cabanier: Not great for performance cabanier: So, maybe don't want to do that. dino: Suppose I've got this complicated document dino: Copy it to another document that has a video in it, suddenly doesn't work dino: Have document with 3 children, they blend with each other dino: I set the opacity on the middle one. What about it's children? cabanier: That's all fine cabanier: If your parent has opacity, you won't blend with its parent ... dino: so, everything blends in its regular order in the document krit: z-index creates a stacking context and content can not blend with everything beyond it dino gives example of child with video descendant ... dino: It's easy for Core Animation's compositor, can specify blending of child into its parent dino: But what looks like parent-child relationship in HTML document isn't necessarily that simple in compositor dino: Example is 3D transforms dino: ... dino: Disconnected from your parent, so can't blend into it cabanier: At some point the 3D object is composited though dino: You could hit significant perf problems without knowing why dino: Have to flatten the 3D world dino: get those bits, etc. cabanier: it's the same math ... dino: [something about not using compositing for web content]???? dbaron: What do you mean by not using compositing? * scribe missed the answer dino: have to manipulate tree heavily to do things like clipping, overflow, scrolling dino: Compositing has perf benefits with massive complexity dino: Makes it harder to add useful things like blending krit says something * scribe can't hear krit dino: If you don't add the feature, people assume it's not there. dino: For widows and orphans, couldn't implement initial value of 2 because people assumed there was no widow/orphan control dbaron: I don't think there's been enough review of this to say "yes this is good right now" cabanier: I would love more reviews dbaron: Review isn't magical that ppl can just do, there are problems you don't find until you try to implement dbaron: and others that you don't find until you have two implementations and realize they're not interoperable dbaron: I'm concerned also about use cases, and if this is addressing things authors really want to do. dbaron: But don't know how to find out if that's the case. cabanier: Designers use it all the time in Adobe products dbaron: Other thing is, there is a trade-off here. Doing it once in Photoshop uses a lot less energy overall than sending it off to everyone's web browser. cabanier: Not replacing photoshop cabanier: But better to keep semantics than rasterizing dbaron: Anything else to discuss? cabanier: Don't think so dbaron: No objections now, but def want more time for ppl to look at this. cabanier: Testing feature behind flags fantasai: Do we need a new WD? RESOLVED: Publish WD
Received on Friday, 28 June 2013 01:25:36 UTC