[css-viewport] [css-contain] Zoom and container queries #10268
Description
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).
Metadata
Metadata
Assignees
Labels
Type
Projects
Status