Re: [css-transforms] Handling combined opacity and preserve-3d

> On Feb 24, 2016, at 6:45 pm, Matt Woodrow <mwoodrow@mozilla.com> wrote:
> 
> What is the expected behaviour when transform-style:preserve-3d and opacity are combined on a single element?
> 
> The current working draft [1] makes no mention of what to do.

As Tab says, TR = Trash. You should look at the editor’s draft, which is much more recent than the 2013 TR version.

You’re right that the transform-style definition doesn’t specify that opacity causes flattening (it should), but section 6.1.2. does:

> Some CSS properties have values that are considered to force "grouping": they require that their element and its descendants are rendered as a group before being composited with other elements; these include opacity, filters and properties that affect clipping. The relevant property values are listed under grouping property values <https://drafts.csswg.org/css-transforms/#grouping-property-values>. These grouping property values force the used value for transform-style to be "flat”,


> I wrote a test to check the behaviours of various browsers [2] and it looks like both Blink and Webkit apply the opacity to each of the preserve-3d 'leaves' instead of applying it as a group.

I’d consider this a bug, although, as you mention below, there is certainly web compat risk in fixing it. ‘opacity’ in CSS really does mean group opacity, which  requires flattening.

Sadly we missed fixing it before dropping prefixes; the code has:
    // FIXME: when dropping the -webkit prefix on transform-style, we should also have opacity < 1 cause flattening.


> Gecko flattens that subtree to apply the opacity as a group, and in currently Nightly we make a better attempt to sort what remains.
> 
> The current editors draft [3] also requires flattening, but I don't think that's going to be web compatible, as we've already found websites that are using this [4].
> 
> I think it's worth updating the working draft to spec the Blink/Webkit behaviour, since the editors draft is a big change and unlikely to be finished quickly. I'll happily fix Gecko to match this behavior.

When finishing off CSS Transforms, we’re going to have to be willing to create combat issues; there’s no way we can avoid them with the current lack of compat between browsers. I’d like to see more breakage than [4] before speccing broken Blink/WebKit behavior.

Simon

> 
> Thanks!
> 
> - Matt
> 
> 
> [1] http://www.w3.org/TR/css-transforms-1/#transform-style-property
> [2] http://people.mozilla.org/~mwoodrow/preserve3d-opacity.html
> [3] https://drafts.csswg.org/css-transforms/#grouping-property-values
> [4] http://lacigrona.com/carta/comida/
>