[css-viewport] [css-contain] Zoom and container queries

emilio commented 7 months ago

How should CSS zoom be handled (if at all) in a @container query?

A container query like @container (width > 100px) { } is rather weird wrt CSS zoom. Should it use pixels:

As considered by the page (un-zoomed).
As considered by the container.
As considered by the element you're styling.

Safari disagrees with Chrome / Firefox on this test-case:

<!doctype html>
<style>
  .container {
    container-type: inline-size;
    width: 100px;
    height: 100px;
  }
  .child {
    background-color: red;
    height: 50px;
    width: 50px;
    @container (width > 120px) {
      background-color: green;
    }
  }
</style>
<div class="container">
  <div class="child"></div>
</div>
<div class="container" style="zoom: 2">
  <div class="child"></div>
</div>
<div class="container" style="zoom: 2">
  <div class="nested" style="zoom: 2">
    <div class="child"></div>
  </div>
</div>
<div class="outer" style="zoom: 2">
  <div class="container">
    <div class="child"></div>
  </div>
</div>

Same for container query relative units, I suspect that the best behavior involves some gymnastics with the container and child effective zoom values. Not sure what browsers implement there (Firefox doesn't zoom them at all so they use the coordinate space of the container).

cc @chrishtr @lilles @andruud @nt1m @mirisuzanne @tabatkins

lilles commented 7 months ago

I don't think we made a conscious choice here, but the width/height of the container in CSS pixels as seen by the container just follows from the implementation.

mirisuzanne commented 6 months ago

I agree, that feels best aligned to how we resolve relative units on the container.

css-meeting-bot commented 5 months ago

The CSS Working Group just discussed [css-viewport] [css-contain] Zoom and container queries, and agreed to the following:

RESOLVED: use chrome/firefox behavior

The full IRC log of that discussion

<chrishtr> emilio: what firefox and chrome are doing for container queries and zoom in terms of coordinate space makes sense
<chrishtr> ("width/height of the container in CSS pixels as seen by the container", per lilless)
<chrishtr> rossen: propose to specify the chrome and firefox behavior
<chrishtr> rossen: would like to hear from webkit
<chrishtr> matthieu: don't have a strong opinion, if what chrome and firefox are doing makes sense then let's go wiethi that
<chrishtr> RESOLVED: use chrome/firefox behavior

svgeesus commented 4 months ago

It is unclear to me what specific spec changes need to be made on css-conditional-5 as a result of this resolution.

chrishtr commented 3 months ago

It is unclear to me what specific spec changes need to be made on css-conditional-5 as a result of this resolution.

I think the spec change needed there is to say that the principle box's bounds are unscaled.

Also: I added a testcase.

w3c / csswg-drafts

[css-viewport] [css-contain] Zoom and container queries #10268