Re: Interaction between opacity and transform-style

On Mar 5, 2012, at 11:19 AM, Aryeh Gregor wrote:

> 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?

The rendering should be identical to:

data:text/html,<!doctype html>
<div style="transform-style: preserve-3d">
 <div style="transform-style: flat; opacity: 0.8"> <!-- note flat -->
   <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>

It should look like this:
<https://www.w3.org/Bugs/Public/attachment.cgi?id=1087> (note that W3C bugzilla
is lame and will cause you to download this image).

Simon

Received on Monday, 5 March 2012 20:06:33 UTC