search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.52k stars 674 forks source link

[css-transform] 3D context penetration #1944

Open trchen1033 opened 7 years ago

trchen1033 commented 7 years ago

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.

trchen1033 commented 7 years ago

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>
  </div>
</div>
css-meeting-bot commented 7 years ago

The Working Group just discussed Transforms 3d contexts.

The full IRC log of that discussion <TabAtkins> Topic: Transforms 3d contexts
<trchen> github issue https://github.com/w3c/csswg-drafts/issues/1944
<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: https://github.com/w3c/csswg-drafts/issues/1944
<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_
css-meeting-bot commented 7 years ago

The Working Group just discussed https://github.com/w3c/csswg-drafts/issues/1944.

The full IRC log of that discussion <chrishtr> topic:https://github.com/w3c/csswg-drafts/issues/1944
<chrishtr> Github:https://github.com/w3c/csswg-drafts/issues/1944
<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 https://log.csswg.org/irc.w3.org/fx/2017-11-07/
<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> https://github.com/w3c/csswg-drafts/issues/1944
<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: https://lists.w3.org/Archives/Public/www-archive/2017Nov/att-0006/IMG_20171107_115421.jpg
<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:https://github.com/w3c/csswg-drafts/issues/1944
<RRSAgent> logging to https://www.w3.org/2017/11/07-fx-irc
<dbaron> [note there's a bit of backlog prior to the RRSAgent-recorded log that's on logs.csswg.org ]