Re: [css-transforms] Unify the definition of transform-style & 3D context

On Mon, Sep 26, 2016 at 6:07 PM, Matt Woodrow <> wrote:
> On 27/09/16 1:12 PM, Tien-Ren Chen wrote:
>> I'm particularly worrying about this case:
>> <style> div { transform-style: preserve-3d; } </style>
>> <div>
>>      A
>>      <div style="transform:translateZ(0);">B</div>
>>      <div style="position:relative; z-index:0;">C</div>
>> </div>
>> If we don't make the distinction between 2D/3D (i.e. no plane / new
>> plane), the transition between translateZ(-epsilon), translateZ(0),
>> and translateZ(epsilon) could be tricky. IMO B should be popped into
>> its own plane, and perform depth-sorting against plane AC as a whole.
> What would be the intended result of depth sorting in this case? They both
> have 0 depth, no z-index and now the content order is undefined since AC is
> both before and after B.
> I prefer having B transition to being between A and C while the Z
> translation is 0.

In my opinion, tie breaking should use the order of root background
phase in stacking context order, that is, B on top of AC when z=0.

There are a number of issues for transition to be in between A and C:
1. I really don't think that's what 3D web developers want. Fusion of
planes can be really counter-intuitive at times. For example: (Note: Chromium doesn't even rendering this
correctly. Please open with Firefox.)
2. Higher runtime cost. A and C will need to be cached in separate
buffer,  more buffer to composite, and more polygons need to be
3. Numerical issue. It is difficult to decide whether two matrices are
co-planar. For example, rotateY(30deg)translateZ(10px) and
rotateY(30deg)translateZ(10px)rotateZ(30deg) are obviously coplanar,
but their computed normal vector is likely to differ by a few ulps. In
Chromium we used a tolerance value, but that created another class of

>> Another weird case:
>> <style> div { transform-style: preserve-3d; } </style>
>> <div id="A" style="background:some_image; translateZ(0);">
>>      Foreground
>>      <div id="B" style="transform:translateZ(0); position:relative;
>> z-index:-1;">Stuck in middle?</div>
>> </div>
>> Should B to stack in between the background/foreground of A because it
>> has negative z-index? I think the sensible thing to do is to pop it to
>> its own plane.
> I'm not sure I understand this case fully. It makes sense to me that B would
> be in the middle, z-index applies within the current stacking context,
> putting B before Foreground.

Yes, with no doubt things should behave as you just described if
everything have transform-style:flat.

However my two cents is that we should double think what would be the
most useful and intuitive behavior with transform-style:preserve-3d.
With preserve-3d, the subtree won't be atomic / in an isolated group

Received on Tuesday, 27 September 2016 22:25:37 UTC