[css-transforms] [proposal-ish] Non-flattening filters and opacity. #496
Description
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 (flatorsingle).opacity-style: single- does not flatten anything and only
applies opacity to the target element but not its childrenopacity-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).