[css-transforms-2] proposal new transform-style: detached

[rcabanier]

The current transform-style property defines the values auto, flat and preserve-3d.

Currently, these 3D transform styles composite the transformed element back into the 2D page. This makes sense for classic displays such as monitors and cell phones, but on devices where the browser lives in 3D such in VR and AR devices, it is possible to render these elements in actual 3d.

We're proposing to add a new transform-style called detached. It follows the same rules as preserve-3d except it skip the step where it is recomposited into the page.

[smfr]

except it skip the step where it is recomposited into the page

So where is it composited?

[rcabanier]

So where is it composited?

It is composited in 3D space around the browser plane.

We've defined a "safe" region around the browser where detached content can be placed so the transformed content is locked to a certain area. The spec should probably call out a minimum size for this area so authors can be sure that their content will look ok across UAs.
We also limited this feature to the top frame so iframe content can't escape its box.

If the UA doesn't support detached, it will revert to preserve-3d
If detached is nested in another detached, it will revert to preserve-3d

[smfr]

Piggy-backing on transform-style seems like the wrong thing here. Isn't this more like taking an element and painting it somewhere else (like a canvas)?

[rcabanier]

Piggy-backing on transform-style seems like the wrong thing here. Isn't this more like taking an element and painting it somewhere else (like a canvas)?

No :-)
The element itself is lifted out of the page and painted on its own surface. That surface is then placed in 3D around the browser. The page is not able to get to the rendered pixels. It's exactly like preserve-3d, just without the final recompositing of the surface to the page.

The transformed element also stays interactive (hit testing, streaming video, etc) and you can apply CSS animations.

[smfr]

Well we haven't really decided what preserve-3d itself means.

How does hit-testing work in this model? Do multiple 'detached' intersect?

[rcabanier]

Well we haven't really decided what preserve-3d itself means.

Yes, that's a bit unfortunate. Was any progress made on this recently?

How does hit-testing work in this model?

When using the 6DOF controller and it intersects the plane, the cursor will move from the browser plane to the detached surface. Hit testing will then work as usual. (If there is no cursor, the user will just use the 6DOF hit position)

Do multiple 'detached' intersect?

I think so. preserve-3d also lets content intersect: https://jsfiddle.net/madehrp2/1/
If that codepen was changed to use detached instead, the 2 divs would be hovering 100 pixels above the web page on a Magic Leap device.

[dbaron]

How do detached and preserve-3d interact with each other? What happens when there's a connected tree of stuff with mix of both? Does only the one at the root of the tree matter, or do they somehow switch behaviors?

[rcabanier]

How do detached and preserve-3d interact with each other? What happens when there's a connected tree of stuff with mix of both? Does only the one at the root of the tree matter, or do they somehow switch behaviors?

Yes, we have to describe the exact behavior in the spec.
Our current thinking is that only detached at the root of the tree will trigger the behavior. If there's preserve-3d at the root or detached in the child nodes, detached will act as preserve-3d in that tree.

[progers]

How would detached interact with clipping (e.g., overflow:hidden or clip-path)? For example, if a detached box is below a clip path, would the box's pixels be clipped as if it were preserve-3d?

Similarly, how would detached interact with atomic operations such as filtering? For example, if two detached boxes have a blur filter on them, would their pixels be blurred as if preserve-3d was used?

[progers]

Would you be willing to write an explainer for this proposal?

[smfr]

Also, is there multi-vendor interest?