Re: [csswg-drafts] [css-transforms-2] Preserve-3d + backface visibility semantics need to be clarified (#918)

> I think this seems like a good approach. A few comments:
> 
> * I think the definition of when `backface-visibility: hidden` needs to create a stacking context should have two parts:  either (a) if it participates in a 3D rendering context or (b) it has a 3D transform.  This is needed since `backface-visibility` does work on elements with 3D transforms even if they're not in a 3D rendering context.

I think that's fine, but `transform` already creates a stacking context, so the second half is a no-op (but maybe useful clarity regardless).

> * As to the question of what is _in_ that stacking context (and hidden if the backface is hidden):  I think the idea of all descendants in the plane, but not other descendants, is a good one.  It's sort of an unusual thing to specify... but I think maybe it's also sort of how the stacking context established by `transform` itself works.

Also agreed! I think we need to define this as part of `transform` (or maybe `transform-style`, since it's `preserve-3d` that causes this to deviate from the normal stacking context definition). `backface-visibility` can then make reference the above as to what exactly it's hiding the backface of.

> * One important question with this proposal is what makes content "in the plane" versus "out of the plane" (since that now controls both whether it's in the stacking context and whether the backface-visibility: hidden applies to it).  I'd suggest maybe this should be defined based on whether the transform function is a 3D transform function or not.  This has the advantages that:
>   
>   * we don't need to worry about mathematical precision issues for whether a transform is flat or not and
>   * it avoids discontinuity at the ends of animations (for example, if the endpoints of an animation are flat but the middle is 3D, which I think is a reasonable setup and probably not an unusual use of 3D transforms) and
>   * it gives authors a relatively straightforward way to escape from the stacking context.
> 

Does that mean for this example:

```
<div style="transform: rotateX(180deg); backface-visibility: hidden; background-colour: blue; transform-style: preserve-3d">
    <div style="transform: scaleZ(2); background-colour: red"><div>
    <div style="transform: scaleX(2); background-colour: green"><div>
</div>
```

We'd see just the red colour?

I guess that means that the green element doesn't really participate in the 3D rendering context.


> We probably need to do some measurement/testing of whether we're going to have any compatibility problems with this approach, but it seems like a sensible plan and one that has a reasonable chance of being sufficiently compatible.

Fingers crossed it works out! I'll aim to implement the current plan in WebKit, behind a testable flag and can go from there.





-- 
GitHub Notification of comment by mattwoodrow
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/918#issuecomment-1700187099 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 31 August 2023 01:25:55 UTC