Interaction between opacity and transform-style

Bug: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15871

When transform-style: preserve-3d is specified, the element and its
children are rendered as 3D objects.  What happens if opacity is
specified on the same element?  Test-case:

data:text/html,<!doctype html>
<div style="transform-style: preserve-3d">
  <div style="transform-style: preserve-3d; opacity: 0.8">
    <div style="height:100px; width:100px; background:lime;
    transform: translatez(10px)"></div>
    <div style="height:100px; width:100px; background:red;
    transform: translate3d(0, -50px, -10px)"></div>
  </div>
  <div style="height:100px; width:100px; background:yellow;
  transform: translate3d(50px, -175px, -20px)"></div>
</div>

Questions:

1) What order do the boxes render?  Without the opacity, it should be
the green box on top of the red box on top of the yellow box (in order
of Z-coordinate).  This is how Chrome 19 dev behaves with opacity.
Firefox 13.0a1 puts the yellow box on top of the green box on top of
the red box.  The current spec seems to imply that the yellow box
should be on top of the red box on top of the green box (in DOM
order), because it says the transform-style of an element with opacity
is always flat.  Chrome's behavior certainly makes the most sense,
because it's surprising that opacity would affect Z-ordering.

2) Should the red box be partly visible through the green box?  In
Chrome it is; in Firefox it's not.  There seems to be agreement that
Firefox's behavior is correct here; see
<http://lists.w3.org/Archives/Public/www-style/2011Nov/0244.html> and
followups.

(If anyone has access to a copy of Safari on Mac, I'd be interested to
hear how it behaves.)

So it seems to me like Chrome makes more sense for (1) and Firefox
makes more sense for (2).  The problem is, I've been told
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=15871#c6> we can't
have both.  If opacity is applied to the whole group, it has to be
flattened first, so in this case the yellow square will be topmost
(like Firefox).  If there's no flattening, it has to be applied to the
individual boxes, so in this case you'll be able to see the red box
through the green one (like Chrome).  Is this correct -- there's no
way to have both behaviors?  If so, which way do we want to go?

Received on Monday, 5 March 2012 19:20:02 UTC