Detaching elements

With the advent of Virtual/Augmented/Mixed Reality (XR), a new style of 3D interfaces is emerging. We are no longer limited to flat screens; instead the user interface can be split up in sections and positioned within a 3D space.

Browser vendors are developing WebXR for WebGL rendered content and are experimenting with immersive, interactive experiences. However, until now it was not possible to position CSS generated content in 3D.

This is provided as a developer preview and is subject to change.

transform-style: detached

transform-style is a CSS property which determines how the element and its children are composited to the page. We extend this property by adding a detached style defining the following behavior for transform-styles.

• flat - Creates a stacking context for its children and renders the contents of the current node along with any children into the main page.
• preserve-3d - Positions its children into a 3D space before rendering the contents of the current node along any with children into the main page.
• detached - Behaves identically to flat except the contents of the current node along and any children are rendered into a new rendering surface.

Note: 'detached' is not a standard approved keyword. Magic Leap is currently working on a proposal for the W3C.

The detached surfaces are positioned based on the page layout and CSS transform properties. See examples here.

Behavior on other platforms

When extending existing CSS properties, one of our goals is to ensure we have a graceful fallback on non XR devices that do not support the 'detached' transform-style. Elements with transform-style 'detached' will fallback to transform-style flat with minimal side-effects. The layout of the elements are preserved.

Caveats

Nesting detached surfaces

Detached surfaces cannot have detached children. The parent is rendered to a detached rendered surface while the child defaults to transform-style: flat.

Inheriting effects from parents

Any rendering effects set on parents of detached surfaces (such as transparency or clip) is not applied to detached elements as the contents are separated from the parent prior to effects being applied.

Known limitations

• User interactions on detached nodes is not allowed. For example, button clicks, cursor movement, and hover events are all disabled on detached nodes. Enabling user interaction is work in progress.

• Detached surfaces are transparent by default and so are root render surfaces on our platform. This potentially causes rendering issues relating to sorting transparent surfaces. Refer here for a similar issue in Unity. To mitigate this issue, use small, detached surfaces that are at significantly separated.

• There are no limitations to the number of detached surfaces that can be created. Each detached node creates render surfaces and associated objects that consume memory. Creating a large number of detached surfaces may cause the device to run out of resources, or cause system or browser instability. To mitigate this issue, keep detached surfaces small and in few numbers. Limiting the detached node size and count is a work in progress.