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

[CSSWG][SVGWG] Minutes Tokyo F2F 2013-06-05 Wed PM II: Compositing and Blending

From: fantasai <fantasai.lists@inkedblade.net>
Date: Thu, 27 Jun 2013 18:25:06 -0700
Message-ID: <51CCE5F2.5070806@inkedblade.net>
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:43 UTC

This archive was generated by hypermail 2.3.1 : Friday, 28 June 2013 01:25:44 UTC