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

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.

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.

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 behaviour.

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/

Received on Thursday, 25 February 2016 02:46:19 UTC