[css-transforms] [proposal-ish] Non-flattening filters and opacity.

[trusktr]

Related spec: https://drafts.csswg.org/css-transforms/#grouping-property-values

The recent changes in Chrome 53 (implementing css-transforms) have caused opacity to flatten 3D objects in my 3D scenes. This is very unwelcoming, and I'd like to propose that the spec needs a better solution.

I'm not proposing the actual solution, but rather ideas that may get you (the experts) to come up with the needed solution.

The full description of the problem and the rough proposed solution is in this message: https://lists.w3.org/Archives/Public/public-fx/2016JulSep/0020.html

Problem

The default new behavior flattens 3D objects, as discussed in the thread titled "[css-transforms] CSS3D breaks with opacity flattening" over in the archives.

It is intuitive that we can apply an opacity to a 3D object using the opacity property to make it transparent, but it becoming flat like paper is simply not intuitive.

Solution

I propose that we need some way to control what type of opacity we are applying to our objects.

A new opacity-style property could allow us to specify the type of opacity we want:

• opacity-style: 3d - similar to the legacy behavior and is
  great for 3D scenes, and does not flatten anything. Opacity is multiplied
  all the way down the tree with other same-style opacities and stops at
  elements that have a different opacity-style (flat or single).
• opacity-style: single - does not flatten anything and only
  applies opacity to the target element but not its children
• opacity-style: flat - the new behavior of the latest spec, which Chrome 53
  just released, where things are flattened and a new 3D context is made. I still
  fail to see how this is desirable.

The default value can be opacity-style: single, which I think is the
least impacting of the three. We can then see what 3D programmers end up
using more often (I'd like to bet that opacity-style: flat will be the
least used). Or, perhaps the default for a 3D object can be single, and
flat for non-3D objects.

What are your thoughts on something like this, opacity-style? Because, as
it stands, opacity in the 3D web isn't very workable now in nested scenes
(it is much more workable with the legacy behavior).

[trusktr]

I would also urge that Chrome 53 and all other browsers revert changes (if only this were possible), and wait for the spec to give us proper opacity so that 3D library authors can take advantage of CSS' preserve-3d without reverting back to a non-nested approach.

[trusktr]

I don't see anything about opacity and flattening at https://drafts.csswg.org/css-transforms/#grouping-property-values anymore. Where'd it go?

[tabatkins]

That section is only relevant for 3d transforms, and we split out the 3d transforms to level 2 https://drafts.csswg.org/css-transforms-2/#grouping-property-values

[tabatkins]

But also: this discussion has been had to death on the mailing list already. The opacity property implements "group opacity", like filter does group filtering and such. By the definition of that effect, it has to flatten any 3d things. If you want stuff to not be flattened, you want "leaf opacity"; this doesn't have a convenient shorthand in CSS, but can be achieved by putting opacity on each individual leaf node in your graph.

Before 53, Chrome was just buggy, and automatically pushed opacity down to the leaves when doing 3d scenes. There was no spec change that made them change; they just finally implemented the spec correctly.