Conversation
github-actions
Bot
added
Content:CSS
|
Preview URLs (3 pages)
Flaws (1) Note! 2 documents with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
(comment last updated: 2026-05-29 01:26:27) |
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
| The **WebXR DOM overlays** module, an immersive web specification, expands the [WebXR Device API](/en-US/docs/Web/API/WebXR_Device_API) to allow HTML content — such as text and controls — to be displayed during an immersive virtual reality (VR) or augmented reality (AR) session. | ||
|
|
||
| In a typical WebXR session, content is rendered to a WebGL canvas superimposed on the real-world camera feed (in AR) or displayed as the full immersive view (in VR), with the device tracking the user's position and orientation. | ||
| The DOM overlay renders a single DOM element and its descendants as a transparent-background 2D rectangle on top of this view, enabling interactive, stylable elements such as menus and dialogs to appear within the immersive experience. | ||
|
|
||
| The {{cssxref(":xr-overlay")}} pseudo-class matches the DOM overlay element when a web page is being viewed in an immersive AR or VR environment, allowing it to be styled appropriately for its underlying content. |
| background-color: white; | ||
| color: black; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Won't this make the overlay opaque?
Given that in the other doc we have said "... as a transparent-background 2D rectangle on t...." I think we need to make this transparent.
In almost all cases the overlay will be semitransparent, but it isn't that way by magic (I don't think). I think that's what our styling is supposed to do. We can leave the intro of the other doc alone but here we should have an example that styles it as it will be in most cases and explain why.
3 participants
Fixes mdn/mdn#808
The
:xr-overlaypseudo-class is defined in the https://immersive-web.github.io/dom-overlays/ spec. this adds that module.