Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-transform] 3D context penetration #1944

trchen1033 opened this issue Nov 6, 2017 · 3 comments


None yet
4 participants
Copy link

commented Nov 6, 2017

Explainer document:
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:


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.


This comment has been minimized.

Copy link
Contributor Author

commented Nov 6, 2017

Oops, the example was not escaped properly.

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

This comment has been minimized.

Copy link

commented Nov 6, 2017

The Working Group just discussed Transforms 3d contexts.

The full IRC log of that discussion <TabAtkins> Topic: Transforms 3d contexts
<trchen> github issue
<TabAtkins> trchen: In CSS, having a stacking context does not guarantee an element to be a containing block for every descendent element
<TabAtkins> trchen: And being a contining block doesn't imply being a stacking context
<Rossen> github:
<TabAtkins> trchen: 3d context is a stacking concept - it decides which planes need to be 3d-sorted against each other
<TabAtkins> trchen: But at the same time we define 3d context of elements based on containing block
<TabAtkins> trchen: Causes "3d context penetration problem"
<TabAtkins> trchen: Element can be flattened by another element that's not part of its containing block chain
<TabAtkins> trchen: We're working on a project in Blink to simplify compsoiting code, foudn some ill-defined corner cases
<TabAtkins> trchen: Planning to have a breakout session tomorrow afternoon?
<TabAtkins> smfr: Would like to have a browser vendor rep from each for the breakout tomorrow.
<TabAtkins> [discuss details of the breakout]
<gregwhitworth> bingo update: all 4 rewards are gone :) Thanks for playing
<bkardell_> scribenick: bkardell_

This comment has been minimized.

Copy link

commented Nov 7, 2017

The Working Group just discussed

The full IRC log of that discussion <chrishtr> topic:
<chrishtr> Github:
<chrishtr> trchen: how should overflow clip interact with 3d?
<chrishtr> trchen: ED spec requires overflow clips to force flattening and a stacking context
<chrishtr> trchen: making overflow clip a stacking context would break legacy content
<chrishtr> trchen: it seems most implementations flatten children of overflow clips but do not induce a stacking context
<chrishtr> dbaron: there was not an intent to make overflow clips a stacking context, does it have to?
<chrishtr> trchen: thought the reason was to avoid parallax
<chrishtr> trchen: but 3d content has a separate texture backing in Chrome/Safari anyway
<chrishtr> smfr: clipping has to happen in 2D if it's going to happen, so that means you have to flatten if you are going to apply it
<chrishtr> smfr: transform-style: flat currently forces a stacking context in the ED spec, maybe that has to change?
<chrishtr> trchen: grouping properties for a stacking context, there is no way to avoid that
<chrishtr> trchen: but overflow clip needs to force transform-style flat, but not be fully grouping
<chrishtr> trchen: next question: how should non-stacking overflow clip behave? in particular how does the flattened result stack against other elements in the containing stacking context?
<chrishtr> smfr: should lie on the z=0 plane
<chrishtr> trchen: how to sort against other z=0 children?
<chrishtr> smfr: do 3d children depth sort before flattening?
<chrishtr> trchen: mozilla, blink, edge follow TR generally, safari somewhere between TR and ED
<chrishtr> smfr: one use case of overflow scrolling + 3d is parallax
<chrishtr> smfr: if overflow other than visible forces non-stacking flattening, how are transform matrices accumulated? does it kill parallax?
<chrishtr> matt woodrow: does not kill parallax
<chrishtr> matt woodrow: edge forces a stacking context with overflow clip + transform-style: preserve-3d
<chrishtr> chrishtr: chrome also forces a stacking context in this case
<chrishtr> trchen: in edge overflow clip with transform-style preserve-3d behaves like a 3d context root, but still inherits non-3d matrices across it
<chrishtr> trchen: unsure what chromium does, we can implement edge behavior if needed
<dbaron> MaRakow: mwoodrow: fyi, backscroll for this channel is at
<chrishtr> trchen: maybe we should force flattening but sort children
<mwoodrow> thanks
<chrishtr> smfr: wouldn't that kill parallax?
<chrishtr> trchen: perspective on the overflow hidden element will still apply as expected for parallax
<chrishtr> smfr: agree that this should work
<chrishtr> trchen: adding perspective on the overflow clipping element will also cause it to be stacking, which is a nice property
<chrishtr> smfr: perspective is a way to apply an additional matrix to descendants
<chrishtr> smfr: perserve-3d is a way to define 3d rendering contexts of sets of elements/a space into which subtree elements will 3D sort
<chrishtr> smfr: convenient to think about hoisting the children up to the 3d rendering context root
<chrishtr> smfr: preseve-3d prevents flattening, you should not apply it to the root, should apply to intermediate elements between root and 3d descendants. perspective should be on the root
<chrishtr> (note: all this is info from smfr on the ED way of thinking)
<chrishtr> chrishtr: consensus seems to be that an overflow clipping element should be forced to transform-style flat but not a stacking context, and should allow pespective to be specified on itself
<chrishtr> trchen: still need to resolve z-index sorting
<MaRakow> q+
<chrishtr> smfr: comment about z-index above is not specific to overflow clip, it's a general thing
<chrishtr> marakow: is there a github issue?
<chrishtr> chrishtr: the above link is for the explainer
<chrishtr> marakow: we need all these examples and testcases written down
<chrishtr> chrishtr: trchen will take this action item
<chrishtr> trchen: overflow clip is special for z-index because we need to do "premature" flattening
<chrishtr> smfr: ED currently says that transform-style: flat is a stacking context
<chrishtr> trchen: prefer to remove that clause from ED
<dbaron> The whiteboard drawings are:
<Rossen> q?
<chrishtr> smfr: new issue to discuss: how is transform-style flat specified if changed? more generally, how does this affect how 3d contexts are defined?
<chrishtr> github:
<RRSAgent> logging to
<dbaron> [note there's a bit of backlog prior to the RRSAgent-recorded log that's on ]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.