Re: Interaction between opacity and transform-style

On Thu, Mar 15, 2012 at 1:00 PM, Simon Fraser <smfr@me.com> wrote:
> Can you explain the difference more clearly? As currently written,
> the spec has no way to allow a child to be in a different 3D
> rendering context than its parent, if both have transform-style: preserve-3d.
> You're suggesting that this should be possible somehow, for this
> opacity case. I'm not sure how that would work.
>
> Also, what are the Safari differences that you mention?

Here's a test-case (adapted from earlier in the thread):

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

Firefox 14.0a1 displays green (with prefixes changed).  Chrome 19 dev
with GPU acceleration, and WebKit nightly r109732 on Windows 8,
display green.  If you remove the outermost div, Chrome displays green
but the WebKit nightly still displays red.  The spec seems pretty
clear on the fact that green is correct in both cases, whether or not
the outermost div is present:

"""
An element with a three-dimensional transform that is not contained in
a 3D rendering context renders with the appropriate transform applied
. . . [but] the transform does not affect painting order. For example,
a transform with a positive Z translation may make an element look
larger, but does not cause that element to render in front of elements
with no translation in Z.
"""
http://dev.w3.org/csswg/css3-transforms/#transform-3d-rendering

The transformed divs in this test-case are not contained in a 3D
rendering context, so the Z-order should be unaffected by the
transform -- they should paint in DOM order, which means green on top.
 Do you interpret the spec differently?

Received on Thursday, 15 March 2012 17:29:11 UTC