htmlcssbackground-color

Is there a bug in the container-type property when it is set to "size" on the <body> tag?

I am working on a web design for a personal blog, and I seem to have run into some kind of bug, or maybe I am overlooking something.

body {
  background-color: red;

  /** Comment/uncomment the next line to see the color change**/
  container-type: size;
}

.container {
  background-color: green;
  container-type: size;
  /**Simply cosmetic**/
  display: flex;
  width: 250px;
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  margin: auto;
}
<div class="container">
  <p>Some text</p>
</div>

Codepen

I set the container-type in the div to show that it is not "disabling" the background color in the div. Also note that if you change container-type to inline-size in the body tag, the background color works.

I also tried assigning a class name to the body tag and using the class selector, but the issue persists unless, again, I change the container type to inline-size. The issue also happens if I use the long-hand method:

body {
 container: name / size;
}

I suppose the workaround would be to wrap the content of the body inside yet another div, and set that div as a container, but I cannot imagine a valid reason for "disabling" defining the background color of the body tag if its container-type is set to size.

And yes, for the design I am working on, I need to use the size type, as the height of the container (in this case, the body/viewport) will influence the size/height of one of the children.

So, is this a bug? If so, how and to whom do I report it?

Solution

  • No, it's not a bug.

    Normally, the body background is propagated to the canvas. But the CSS Containment spec says:

    Additionally, when the used value of the contain property on either the HTML html or body elements is anything other than none, propagation of properties from the body element to the initial containing block, the viewport, or the canvas background, is disabled.

    In the case of inline-size containment, the propagation to the canvas is still disabled, but the body's block size is not zeroed, so it is still the height of its content and the width of its containing block.