[css-transforms] CSS3D issue with opacity in Chrome 53

Rik said

> > The fix is straightforward - setting opacity should only affect opacity.
> >


> Can you tell us how that would work?
> Keep in mind that if you apply opacity to a group (=multiple elements), the
> rendering of that group is defined here:
> https://www.w3.org/TR/compositing-1/#groups


 I don't know how to word it in the spec, but I think the middle-ground
solution is for opacity (and other blending properties) to apply only onto
the plane in the plane where it is applied (3D or not). If transform-style
is preserve-3d, then opacity would apply only to the target plane, but not
to any children who are popped out as separate planes within the 3D
context. If transform-style is flat, then the 3D children *are* part of the
target plane where opacity is applied, and in that case opacity is applied
to children.

Lastly, the value of transform-style should not be automatically set when
opacity is set, but rather the user's chosen value can influence the type
of opacity.

There could additionally be some additional property that, while
transform-style is preserve-3d, opacity can propagate to children, but that
can also be easily implemented in user-space *without having to modify the
underlying DOM structure. *However, this incurs the extra penalties from
number-to-string-to-number conversion when passing child opacities in via
the style attributes on children.

*/#!/*JoePea