w3c
[css-viewport] [css-contain] Zoom and container queries
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
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.
I agree, that feels best aligned to how we resolve relative units on the container.
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
It is unclear to me what specific spec changes need to be made on css-conditional-5 as a result of this resolution.
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.
