Re: [css-transforms] CSS3D breaks with opacity flattening

Changing how opacity works is not an option.  It is a group property, not
an inherited one.  It takes the rendered and composited group, and adjusts
alpha.  For its original purpose in 2D SVG, this is essential.  You can
create an image from many different shapes, one for each color, and have it
fade in and out as a whole, without revealing the underlying layering.

Would it be possible to instead add a different property (say, "alpha"),
which *is* inheritable, not group, and adjusts the alpha of every paint
operation by that factor?  It would be similar to applying opacity to leaf
nodes, but you could set it once on the group and have it inherit. It would
also have to apply to each background, text, etc., separately, so that
container elements with a mix of child content plus their own
background/text wouldn't end up compounding the transparency of their

For any child element that you *wanted* to treat as a flattened layer, you
would set alpha=1 and opacity=*alpha-factor* (possibly using CSS variables
to keep track of what your alpha factor is).

Those of you who know more than me about how compositing is implemented,
does this sound feasible?

Otherwise, my best recommendation to people who want the 3D opacity effect
is to use CSS variables to set your alpha factor on your group, and then
use opacity:var(--alpha) on any (flat) layer that actually includes painted

Unfortunately, however, for now that means not being able to use CSS
animations/transitions or web animation to transition alpha.  We're still
waiting for typed CSS custom properties that can be interpolated.


Received on Monday, 19 September 2016 14:49:05 UTC