Re: Interaction between opacity and transform-style

On Mar 15, 2012, at 10:28 AM, Aryeh Gregor wrote:

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

This is why the spec has Issue 3: "This description does not exactly match what WebKit implements".

WebKit does depth-sorting of siblings based on 3d transforms outside of 3D rendering contexts when it should not.

Simon

Received on Thursday, 15 March 2012 17:37:51 UTC