[csswg-drafts] [css-transform] 3D context penetration

trchen1033 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transform] 3D context penetration ==
Explainer document: https://docs.google.com/document/d/1FIQW9qVPbZxn0pifFOXWWK0-7fXrjlSeYeZN7wHmIHo
Excerpt from the explainer:

3D rendering contexts are ill-defined for certain DOM trees where containing block and stacking context disagree. Even in cases that are well-defined, the definition in TR and ED differ, and the actual 3D sorting behavior is inconsistent across vendors.

Consider the following example:

<div id=root style=”transform-style:preserve-3d;”>
  <div style=”transform-style:preserve-3d; position:absolute; transform:translateZ(2px)”>A</div>
  <div id=isolate style=”isolation:isolate;”>
    <div style=”transform-style:preserve-3d; position:absolute; transform:translateZ(1px)”>B</div>
    <div style=”transform-style:preserve-3d; position:absolute; transform:translateZ(3px)”>C</div>
  </div>
</div>

What should be the stacking order between A, B, and C? B and C are in one stacking context (induced by the “isolation:isolate” property), and A is in another.

According to the ED spec, the 3D context is defined by the nearest containing DOM ancestor of an element with a flat used value of transform-style. In addition, certain other styles force grouping, which means they also force the used value of transform-style to flat. Since isolation (and all other stacking context-inducing properties) are grouping properties, the element with id “isolate” above induces a 3D rendering context for B and C, and A lives in its own independent 3D rendering context.

However, this leaves the accumulated to-screen matrix of B and C ill-defined, because the ED spec also requires computing the accumulated 3D transform matrix by multiplying ancestor matrices along the containing block chain. This leaves the matrices for B and C ill-defined, because the condition in step 4 of the algorithm (stop at the 3D rendering context root) never occurs, as “isolate” is not in the containing block chain of B or C.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1944 using your GitHub account

Received on Monday, 6 November 2017 17:04:37 UTC