[css-background-4] Switch to opt into transparent canvas for additive displays

[cabanier]

On passthrough devices such as Magic Leap One or Hololens, the browsing experience in "dark" mode is more pleasant if the browser canvas itself is transparent.

By default, the canvas is white and the [css-color-adjust] spec just inverts that to black.
Can there be a way for an author to specify that the canvas color is transparent? Or can the canvas always be transparent for passthrough devices?

[tabatkins]

Black or white being transparent on passthru screens and the like is already allowed just in general.

[cabanier]

@tabatkins I don't follow. We want authors to opt their pages into being transparent using the meta tag.
Are you saying that this is already possible?

[cabanier]

I think for transparent displays, the root color of the canvas should be transparent and not black but I'd like that to be reflected in the spec.

[tabatkins]

What I mean is, transparent displays already are allowed to handle CSS's black (or white, depending on the nature of the screen) by instead rendering transparently. We even have a proposed MQ in level 5 to expose when this is happening: https://drafts.csswg.org/mediaqueries-5/#environment-blending

So 'color-scheme' doesn't have any effect on this.

[cabanier]

I know of that one (since I proposed it :-)) Since it's a media query, it doesn't change anything; it just allows switching to a different style for transparent devices.

environment-blending doesn't influence the color of the canvas backdrop since it's specified to be white or black for now. I'm happy to change our implementation to so the canvas is transparent for dark mode when the meta tag is present but would like to see that reflected in the spec.

Just to be clear: this is not about how to handle the black color, this is about the default canvas color (= the color on which all the elements are painted)

[tabatkins]

Right; I'm definitely not saying that the MQ changes anything about the page!

What I'm saying is that the existence of the MQ implies that rendering engines can already render black/white as transparent, if that's ideal for their display. There's nothing stopping you from rendering any way you'd like, as long as it makes your users happy.

Just to be clear: this is not about how to handle the black color, this is about the default canvas color

Sure. Similar story tho. Color Adjust does not prescribe any particular colors, it just gives guidelines for what "light" and "dark" should mean. If a transparent canvas is the best way for your display to implement a "dark" mode, then go for it.

[jonjohnjohnson]

Or can the canvas always be transparent for passthrough devices?

@cabanier guessing you might get clarification by adding your questions to the discussion in #3983?

Also,

If the canvas background is not opaque, what shows through is UA-dependent. - https://drafts.csswg.org/css-backgrounds-3/#special-backgrounds

[cabanier]

If the canvas background is not opaque, what shows through is UA-dependent. - https://drafts.csswg.org/css-backgrounds-3/#special-backgrounds

That wording is...odd and not in line with the css color spec.

[tabatkins]

Can you elaborate? What do you think contradicts it in CSS Color?

[cabanier]

css-color specifies that the color of the document canvas is recommended to be white.
css-backgrounds specifies that color of the canvas is inherited from body.

Maybe these are 2 different definitions of 'canvas'?

[fantasai]

@cabanier There does seem to be some confusing wording. CSS Backgrounds (like CSS2 before it) assumes the canvas has a "background", which is taken from the root element and painted over whatever the UA has below that. CSS Color calls that UA default the "color" of the canvas.

It seems we need a clearly defined term for the color of the canvas underneath the background specified by the root element to avoid the confusion between the two concepts. (But in any case, the specs do not conflict.)

[cabanier]

I agree. From CSS Color:

The default background of the root element must be transparent. The default color of the canvas (the surface on which the document is painted) is UA-dependent, but is recommended to be white, especially if the above color rules are used.

We need to define what "the surface on which the document is painted" is called.

[fantasai]

Maybe "canvas surface" as opposed to "canvas background"?